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

DIV边框过于单调？

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

<style type="text/css">
.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;
}
</style>
<div class="main"><!--内容我删除了哦--></div>

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

.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.csdn.net/qq_36120267/article/details/81705148

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

http://listar.top/vip