Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557

box-shadow制作多边框效果

$
0
0

多边框效果,大家常见的应该是双线边框效果,使用页面部分元素具有层次的效果。在CSS2中依靠的是背景图片或者借助相邻两个元素的border来实现。而现在CSS3中的box-shadow可以直接在一个元素中完成,我们来看一个简单的片段:

<!-- HTML -->
<div id="box"></div>

<!-- CSS -- >
body {
  background: #39275B;
}
#box {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  border: 1px solid #1E1530;
  box-shadow:-1px 0 0px #4E3A73,1px 0 0 #4e3a73,0 1px 0 #4e3a73,0 -1px 0 #4e3a73;
}

效果如下:

css3 multiple borders

制作这种效果方法还有很多,同时box-shadow制作多边框的运用与还有其他的,我们再来看一个

#box {
    width: 200px;
    height: 150px;
    margin: 50px auto;
    box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;
}

上面完全是通过box-shadow制作了一个六色边框效果的案例:

css3-multiple-borders

使用这种方法是不是很方便呀,这仅是box-shadow实现多边框的方法,我们还可以使用别的CSS3属性来实现,比如说border-color、::before等,我们将在近期整理有关于制作多边框效果的各种方法,感兴趣的同学可以观注本站的相关更新。

如需转载烦请注明出处:http://www.w3cplus.com/codes/css3-multiple-borders.html


Viewing all articles
Browse latest Browse all 1557

Trending Articles