多重边框

一个box的边框除了用border外,还可以用box-shadow来实现

box-shadow:x偏移量,y偏移量,模糊值,扩张半径,颜色,是否为内边距(inset)

公式是:正值的扩张半径+所有偏移量为0+模糊值为0

box-shadow:0 0 0 10px deeppink;


也可以有多个“边框”,给投影设置多个,用逗号分隔,但要记得给该div设置margin,否则都会落在左上

box-shadow:0 0 0 10px deeppink,0 0 0 20px blue


投影不影响布局,目前为止所设置的都是外边距(外圈)。内边距可以添加inset关键字。设置内边距时要考虑里面有没有位置。

如果仅仅限于设置两层边框的话,也可以用outline这个属性

比如做一个带内嵌白边的盒子

border: 1px solid white; 白边

outline:10px solid yellow; 外边套一层


同样效果也可以配合使用负的outline-offset来使用

border: 1px solid white;border宽都设为1px

outline:1px solid white;

outline-offset:-15px;outline的位置向里

但如果box带圆角,这个属性就不能满足了


你可能感兴趣的:(多重边框)