|
|
|
|
|
|
純CSS如何為div添加圓角漸變邊框
作者:admin 時間:2023-7-7 13:35:32 瀏覽:本文介紹如何為div添加圓角漸變邊框。在此之前，我介紹過如何為div添加圖像邊框和漸變邊框，可參看文章：
效果圖
完整HTML代碼
實現代碼量很少，所以這里直接提供完整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">內容</div>
</body>
</html>
可以看到，圓角漸變邊框是使用偽元素 .container::before 來實現的，它實際是一個實心的圓角漸變方形。
實現原理是先創建一個div，然后在此div前添加一個偽元素，并把兩個元素相疊，疊加部分在上面的便是后面的div。最終呈現如文章開頭的效果圖。
總結
本文介紹了純CSS如何為div添加圓角漸變邊框，示例巧妙地運用了偽元素來實現圓角邊框，實現代碼簡單明了。在前面，我介紹了幾款漂亮好看的邊框圖像示例，請參閱文章：
相關文章
相關文章
- 如何使用純CSS為div添加邊框圖像和漸變邊框
- 5款CSS設置漂亮好看的div邊框圖（border-image）樣式
- CSS如何讓DIV背景圖片隨窗口大小自動縮放【示例】
- [2示例]如何使用CSS將div中的圖像居中對齊（垂直和水平）
- [2示例]使用 CSS 使 div 可水平滾動
- 【8實例】詳解css z-index的值使用區別:-1,0,1,auto,999
- 使用偽元素在p或div左邊(border)上加一個感嘆號警告提示符
- 純CSS實現具有漸變和圓角的彩色邊框
- 130個純CSS3圖標(CSS icons)【#下載#收藏】
- 2例精美CSS3圓角表格#懸停高亮行#斑馬條紋行#
- 【JQuery插件】把網頁或某div或table表格內容轉為圖片并下載
- 6種方法改變div的id值（使用JQuery或JS）
- 用JQuery或JS改變div的id的五種方法
- div層顯示/隱藏的6種常見效果
- 【實例】CSS3畫一個半圓的方法
x
