css box-shadow知识点及多重边框

box-shadow()

参数:

h-shadow:水平阴影的位置。允许负值。
v-shadow:垂直阴影的位置。允许负值。
blur:模糊距离。
spread:扩张半径(可正可负。投影面积则可大可小)
color:阴影颜色
inset:将外部阴影 (outset) 改为内部阴影。

 IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

 

小应用:多重边框

box-shadow方案

一个正值的扩张半径加上水平、垂直为0的偏移量和为0的模糊度,得到的投影效果跟一道实线边框效果很像。
 
div{         
     box-shadow: 0 0 0 10px red;
     background: yellowgreen;     
     }

效果图:

css box-shadow知识点及多重边框_第1张图片

 
 
这用border属性来生成完全一样的效果,一点问题没有。不过,它有一点好处在于,它支持逗号分隔法,我们完全可以创建任意数量的投影。border可以做到吗?no!
 
注意:box-shadow是层层叠加的,列如我还想在上面的效果图外面加个6px的外框,那么扩张半径则为(10px+6px)16px;
 
甚至你可以在边框底下再加一些常规的投影:
 
div{  
     box-shadow: 0 0 0 10px red,
          0 0 0 16px green,
          0 2px 5px 16px rgba(0,0,0,.5)
; background: yellowgreen; }

 

css box-shadow知识点及多重边框_第2张图片
 

 

outline方案

 

如果你只需要二层边框,outline不错。先设置常规的border边框,再加上outline(描边),它比上面的box-shadow的一大优点就是,可以生成虚线等边框。

 

上面效果图用outline可以这样写:

div{	
    border: 10px solid red;
    outline: 6px solid green;
    background: yellowgreen;
}

  描边的另一个好处是,可以通过outline-offset属性来控制它跟元素边缘之间的间距。可以接受负值。看个效果图:

 

 div{ 
     outline: 3px dashed white;
     background: black;
outline-offset: -25px; }

css box-shadow知识点及多重边框_第3张图片

 

注意点:

这个outline方案只适用于双层边框的场景,如需多重边框,前一种方案就很好用了。

如果元素边框是圆角,那么描边可能还是直角。(是一个bug,未来可能贴合border-radius圆角)

 

你可能感兴趣的:(前端)