CSS揭秘之《多重边框》

sixgo 发布于2019-08-20 19:08 / 1030人阅读

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却

1、box-shadow还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小
2、如果我们想要一道实线边框其实也是可以通过box-shadow来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值
eg:

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

3、border其实也能实现上述实线效果而且似乎挺简单，但是box-shadow却是有border无法媲美的功能，它支持逗号分隔语法，我们可以创建任意数量的投影
eg:

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

4、需要注意的是box-shadow 是层层叠加的，也就是说如果你想让第二层边框宽度为5的话则必须在第一层边框宽度10的基础上增加5，也就是最终值为15

div {
            width: 100px;
            height: 60px;
            margin: 25px;
            background: yellowgreen;
            box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .6);
        }

具体效果可见链接
5、投影效果跟边框的效果完全不一致，

a)投影它不会影响布局， 而且也不会受到 box-sizing 属性的影响
b)边框会响应鼠标点击事件，投影出来的边框虽然看上去占据空间大了很多，但是点击区域范围没有变大(无法响应点击事件可通过因为它不会影响布局， 而且也不会受到 box-sizing 属性的影响)

6、如果我们要模拟虚线边框的话，box-shadow 就没辙了，虽然outline并不支持逗号分隔，但是可实现虚拟边框，还可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值
需要注意的是：边框不一定会贴合 border-radius 属性产生的圆角，因此如果元素
是圆角的，它的描边可能还是直角的

        div {
            background: yellowgreen;
            border: 10px solid #655;
            outline: 5px solid deeppink;
            outline-offset: 5px;
        }

云服务器 GPU云服务器大揭秘揭秘云存储云计算揭秘人工智能揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85206.html

CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

codeGoogle 2019-08-29 13:20 评论0 收藏0
CSS揭秘之多重边框

摘要：多重边框的两种实现方案以由逗号分隔的列表来描述一个或多个阴影效果。轮廓与边框在以下几个方面存在不同轮廓不占据空间，它们被描绘于内容之上轮廓可以是非矩形的。是元素的轮廓，悬浮在元素边框之上。也就是说，它们之间的颜色会继承父元素的背景色。多重边框的两种实现方案： border-shadow outline Mutiple border ...

liuyix 2019-08-30 11:08 评论0 收藏0
《CSS揭秘》-背景与边框

摘要：给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层，可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。 1.给一个容器设置一层白色背景和一道半透明白色边框。思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。 bac...

tangr206 2019-08-30 15:55 评论0 收藏0
《CSS揭秘》：平行四边形

摘要：在视觉设计中，平行四边形往往可以传达出一种动感。问题使用来创建平行四边形。将所有样式应用到伪元素上，然后对伪元素进行变形。为了使伪元素保持良好的灵活性，可以自动继承主元素的属性。在视觉设计中，平行四边形往往可以传达出一种动感。问题使用CSS来创建平行四边形。可以使用transform: skewX(-45deg) showImg(https://segmentfault.com/...

yuxue 2019-08-29 11:19 评论0 收藏0