亚洲精品在看在线观看精品91,亚洲午夜国产精品无码中文字,久久久久久九九九九色

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

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

效果圖

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

完整HTML代碼

實(shí)現(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 來(lái)實(shí)現(xiàn)的，它實(shí)際是一個(gè)實(shí)心的圓角漸變方形。

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

總結(jié)

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

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

相關(guān)文章

卡卡網(wǎng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

技術(shù)頻道 - html技術(shù)

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

標(biāo)簽: div 圓角 邊框圖像 邊框 漸變邊框

卡卡網(wǎng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

技術(shù)頻道 - html技術(shù)

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

標(biāo)簽: div 圓角 邊框圖像 邊框 漸變邊框

標(biāo)簽: div 圓角邊框圖像邊框漸變邊框