中文字幕精品无码资,国产精品免费在线观看

本文介紹一款純CSS實現(xiàn)的精致好看的圓角漸變邊框。

效果圖

一款純CSS實現(xiàn)的精致好看的圓角漸變邊框

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
:root{
  --border-width: 12px;
  --border-radius: 2rem;
}
body{
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
section {
    position: relative;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    background: white;
    background-clip: padding-box;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

section::after {
    position: absolute;
    top: calc(var(--border-width) * -1); bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1); right: calc(var(--border-width) * -1);
    background: linear-gradient(to bottom right, #ee2400, #699da2, #fbd9d3);
    content: '';
    z-index: -1;
    border-radius: var(--border-radius);
}
</style>
</head>
<body >
<section>
  <p>
    純CSS實現(xiàn)的圓角漸變邊框<br/>
  </p>
</section>
</body>
</html>

實現(xiàn)方法：通過偽元素 ::after 把兩層方塊元素疊加在一起，其中下層是一個漸變背景，上層為白色背景，最后呈現(xiàn)出如文章開頭提供的效果圖。

在前面，我也介紹過類似的漸變邊框，請參看文章：

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

此外，我也曾經(jīng)介紹過幾款漂亮好看的圖像邊框和漸變邊框，請參看文章：

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

相關(guān)文章

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

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

一款純CSS實現(xiàn)的精致好看的圓角漸變邊框

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

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

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

一款純CSS實現(xiàn)的精致好看的圓角漸變邊框

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

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