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 -让边框拥有阴影，边角变得圆滑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。