精品久久,91久久综合精品

本文介紹如何為div添加圓角漸變邊框。在此之前，我介紹過如何為div添加圖像邊框和漸變邊框，可參看文章：

如何使用純CSS為div添加邊框圖像和漸變邊框

效果圖

純CSS如何為div添加圓角漸變邊框

完整HTML代碼

實現(xiàn)代碼量很少，所以這里直接提供完整HTML代碼。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
    background: #fff;
    height: 250px;
    position: relative;
    width: 250px;
    margin:0 auto;
    margin-top:50px;
}
.container::before {
    content: "";
    background-image: linear-gradient(to bottom, red, yellow);
    background-size: 250px;
    border-radius: 30px;
    height: 100%;
    left: -30px;
    top: -30px;
    padding: 30px;
    position: absolute;
    width: 100%;
    z-index: -1;
}
</style>
</head>
<body>
  <div class="container">內(nèi)容</div>
</body>
</html>

可以看到，圓角漸變邊框是使用偽元素 .container::before 來實現(xiàn)的，它實際是一個實心的圓角漸變方形。

實現(xiàn)原理是先創(chuàng)建一個div，然后在此div前添加一個偽元素，并把兩個元素相疊，疊加部分在上面的便是后面的div。最終呈現(xiàn)如文章開頭的效果圖。

總結

本文介紹了純CSS如何為div添加圓角漸變邊框，示例巧妙地運用了偽元素來實現(xiàn)圓角邊框，實現(xiàn)代碼簡單明了。在前面，我介紹了幾款漂亮好看的邊框圖像示例，請參閱文章：

5款CSS設置漂亮好看的div邊框圖（border-image）樣式

相關文章

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

技術頻道 - html技術

純CSS如何為div添加圓角漸變邊框

標簽: div 圓角 邊框圖像 邊框 漸變邊框

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

技術頻道 - html技術

純CSS如何為div添加圓角漸變邊框

標簽: div 圓角 邊框圖像 邊框 漸變邊框

標簽: div 圓角邊框圖像邊框漸變邊框