2.多重边框

本文最后更新于:7 天前

多重边框

一般我们会选择使用shadow-阴影来做外面第二层的边框,同时因为shadow可以写多个,那么可以叠加多层阴影,同时第一层的阴影会在对顶层,下面类似的依次类推。
box-shadow有六个属性,分别是类型(内外),x偏移量,y偏移量,模糊半径,扩张半径,颜色。
其中的扩张半径就可以为我们提供控制边框的宽度的功能。

width: 50vh; 
height: 20vh;
background: red;
box-shadow: 0 0 0 10px pink;


多写几个就可以有多层了。

box-shadow: 0 0 0 10px pink,
            0 0 0 20px plum;

因为shadow只是阴影,所以他不会影响布局,也不会响应鼠标事件。所以我们很多时候需要根据需求添加内外边距来控制边界的正确显示。

margin: 20px;



本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!