技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時間:2023-7-7 13:35:32    瀏覽:

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

效果圖

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

demodownload

完整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)如文章開頭的效果圖。

總結(jié)

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

相關(guān)文章

標(biāo)簽: div  圓角  邊框圖像  邊框  漸變邊框  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */