CSS——box-shadow做一个border:solid 效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/HarryHY/article/details/102746622

由于在查bug的时候发现了使用border会出现样式的小bug ——由于border会占据盒模型的长高
突然想到不如用box-shadow做一个border的样式
CSS:——border

border:1px solid #0cbbea;

CSS3:——box-shadow

box-shadow:0 0 0 1px #0cbbea;

语法如下

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:必需的。水平阴影的位置。允许负值。
v-shadow :必需的。垂直阴影的位置。允许负值。
blur: 可选。模糊距离。
spread: 可选。阴影的大小。
color:可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表。
inset:可选。从外层的阴影(开始时)改变阴影内侧阴影。

写完了 发现C3说不定支持不是很好 遂查了查——还是挺符合我现在项目要支持的浏览器的。
box-shadow的各个浏览器的支持
我可真是个小机灵鬼

猜你喜欢

转载自blog.csdn.net/HarryHY/article/details/102746622