html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑

DIV边框过于单调？

来为你的DIV边框加上阴影吧，充实边框，美化页面必备

.main{

background-color: rgba(102, 146, 191, 0.44);

/*边框*/

border: solid 1px rgba(102, 146, 191, 0.68);

/*边角弧度*/

border-radius: 10px;

/*阴影*/

-moz-box-shadow:2px 2px 5px #333333;

-webkit-box-shadow:2px 2px 5px #333333;

box-shadow: 7px 15px 30px #285a63;

}

边框美化之后，发现直接显示阴影显得有点突兀，所以，可以考虑给页面加一个过渡效果哦

.main{

/*延迟过度*/

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box;

-o-box-sizing:border-box; /* Opera */

transition: all 0.3s linear;/*0.3s过渡时间*/

-moz-transition: all 0.3s linear; /* Firefox 4 */

-webkit-transition: all 0.3s linear; /* Safari 和 Chrome */

}

设置好了之后，当main修饰的标签发生改变时，就有0.3s的效果过渡时间。

有了过渡时间，那么我们就可以加上一个过渡，让特效展示出来啦

.main:hover{

/*边框*/

border: solid 1px rgba(102, 146, 191, 0.68);

/*边角弧度*/

border-radius: 10px;

box-shadow: 7px 15px 30px #285a63;

}

此时，悬停时，阴影特效就会加强，这里div的美化就成功了，大家看懂了没，有问题或不理解可以留言探讨哦。

美化后的div和背景色搭配起来简直完美哦，下面给大家附上背景色的修改链接

https://blog..net/qq_36120267/article/details/81705148

自己做起来可能不能立马看到效果，我这里也贴心的给大家成品页面看看效果哦

http://listar.top/vip

总结

以上是生活随笔为你收集整理的html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。