如何使用box-shadow制作边框效果(2)-木庄网络博客

2022-03-01 20:07:59 PHP中文网 JavaScript 百度已收录

例：

div{
width:100px;
height: 100px;
border:3px solid pink;
box-shadow:2px 2px 6px 6px #ccc;
        }

效果如下：

接下来就将和大家介绍用box-shadow的方法来制作边框

div{
box-shadow:0 0 0 3px pink;
}

效果图：

未标题-1.jpg

这个方框是不是与我们在前面用border写的方法的效果一样，而且它的渲染效果更好。

div:hover{
box-shadow:0 0 0 6px pink;
    }

效果图如下

可以看出用box-shadow实现的边框在给元素添加hover属性时，文本内容并未移动，而在使用border时，文本内容有向前移动的效果。

总结：以上就是本篇文章的内容了。希望对大家学习有所帮助。

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者