zoukankan      html  css  js  c++  java
  • 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;     
         }

    效果图:

     
     
    这用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; }
     

     

    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; }

    注意点:

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

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

  • 相关阅读:
    js上传超大文件解决方案
    java上传超大文件解决方案
    jsp上传超大文件解决方案
    .net上传超大文件解决方案
    asp.net上传超大文件解决方案
    PHP上传超大文件解决方案
    内网大文件传输断点续传源码
    HDU
    Android中makfile的随记
    android 阿拉伯语下,图库中编辑运动轨迹图片,动画中会显示绿色的图片
  • 原文地址:https://www.cnblogs.com/rain-null/p/6622687.html
Copyright © 2011-2022 走看看