css實現漸變色圓角邊框

標

使用border-image可以設置漸變色邊框，但是當它與border-radius組合使用時，兩者卻無法兼容。

因此，實現這個效果的另一個思路是：利用兩個圓角矩形的面積差形成邊框。故可以使用以下方法實現：

基礎版本

使用嵌套的兩個div，并設置父元素的內邊距padding以此制造面積差，從而形成邊框的效果。

HTML

復制代碼

<div class="border-box">    <div class="border-content"></div></div>

CSS

復制代碼

.border-box{  width: 200px;  background:linear-gradient(0deg,#00135A,#01A1FF);  border-radius: 5px;  padding: 2px;/* 邊框寬度 */}.border-content{  width: 200px;  height: 100px;  border-radius: 5px;   background-color: white;  }

簡化HTML結構版：使用偽元素

使用偽元素充當背景也同樣可以達到上述效果，注意設置z-index將偽元素置于內容之下

HTML

復制代碼

<div class="border-content"></div>

CSS

復制代碼

.border-content{  width: 200px;  height: 100px;  border-radius: 5px;    position: relative;  background-color: white;  }.border-content::before{  content: '';  position: absolute;  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框寬度 */  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于內容之下 */ }

進階版：使用background相關屬性

給一個div設置兩個不同大小的背景，從而利用兩個背景制造面積差，也可以實現上述效果。

如何給div設置兩個背景？

使用background-image屬性設置兩組顏色，一組是內容顏色，另一組是border邊框顏色，用逗號隔開。

如何將兩個背景設置成不同大小？

可以使用background-clip 屬性，該屬性規定了背景的繪制區域。給一組設置為padding-box（背景繪制區域從內邊距框開始），第二組為border-box（背景繪制區域延伸至邊框）。

此時的效果如下：

可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點都是padding-box。

如何更改背景繪制區域的起點？

使用background-origin屬性，該屬性規定了背景的繪制區域相對于什么位置來定位。給一組設置為padding-box（背景繪制區域以 padding 區域為參考），第二組為border-box（背景繪制區域以 border 區域為參考）。

此時即可得到想要的效果，代碼如下：

HTML

復制代碼

<div class="border-content"></div>

CSS

復制代碼

.border-content{  width: 200px;  height: 100px;  border: 2px solid transparent;  border-radius: 5px;  background-clip: padding-box,border-box;  background-origin: padding-box,border-box;  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}

缺陷

該思路無法實現透明底的漸變色圓角邊框。

性漸變:

CSS3可以讓背景產生漸變效果,漸變屬性有兩種,即linear-gradient(線性漸變)和radial-gradient(圓形漸變),語法如下

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient(漸變方向,色彩1,位置1,色彩2,位置2...)

對于線性漸變的方向,只要設置起點即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度來表示,

例如45o表示左下到右上,-45o表示左上到右下。角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg

IE10以下的瀏覽器不支持此語法, 建議使用chrome瀏覽器或其他瀏覽器來瀏覽下面的范例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 800px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;

    /*線性漸變*/
    /*background-image: linear-gradient(方向(從上到下),顏色1,顏色2,顏色3····);*/
    /*background-image: linear-gradient(to right bottom,red,blue);*/
    /*background-image: linear-gradient(45deg,red,blue,pink,green,orange);*/



    /*復雜演示 color1 stop,color2 stop,*/
    background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

徑向漸變

background: radial-gradient(center, shape size, start-color, ..., last-color);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 0 auto;

    /*由中心向四周漸變*/
    background-image: radial-gradient(blue 100px,red);
    background-image: radial-gradient(orange,yellow,#fff,transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

重復的線性漸變

repeating-linear-gradient() 函數用于重復線性漸變：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border-radius: 50%;
    border: 1px solid red;

    background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

我們可以使用漸變工具來生成gradient語法

Ultimate CSS Gradient Generator

網址：http://www.colorzilla.com/gradient-editor/

Orientation: 漸變方向

天，分享一波唯美的邊框，可增加我們的項目"亮"點，讓用戶愛起來。

漸變邊框動畫

事例地址：https://codepen.io/mike-schultz/pen/NgQvGO

CSS Animation Effect Border

事例地址：https://codepen.io/uiswarup/pen/RBByzW

懸停

事例地址：https://codepen.io/giana/pen/yYBpVY

SVG

事例地址：https://codepen.io/ZachSaucier/pen/kyGqm

Design For Button Border

事例地址：https://codepen.io/tmrDevelops/pen/VeRvKX

Create CSS Border Using SVG

事例地址：https://codepen.io/Mamboleoo/pen/zYOJOGb

Beautiful CSS Border For Button

事例地址：https://codepen.io/electerious/pen/qPjbGm

Gradient Border

事例地址：https://codepen.io/chriscoyier/pen/PXNPRq

Create Border Animation Css

事例地址：https://codepen.io/Varin/pen/XjagZv

Striped Outline Button CSS

事例地址：https://codepen.io/Zeindelf/pen/vZbyEg

Image Border Animation CSS

事例地址：https://codepen.io/pavger/pen/bNrxrj

Hover Border

事例地址：https://codepen.io/jessedean/pen/BzjweX

Border SVG Ellipse

事例地址：https://codepen.io/coreybullman/pen/yJoZVQ

Create Circle Border Gradient

事例地址：https://codepen.io/aniketkudale/pen/PoqmexO

Border Shadow Animation

事例地址：https://codepen.io/fixcl/pen/lemjw

Motion With Border Radius CSS

事例地址：https://codepen.io/yukulele/pen/AjFBs

Border Card CSS

事例地址：https://codepen.io/fossheim/pen/LYVOBRZ

Animation Border

事例地址：https://codepen.io/HYPNOS/pen/GFxoC

Gradient Border HTML CSS

事例地址：https://codepen.io/4815162342/pen/NaLdNx

所有源碼可關注《JavaScript 每日一練》后臺回復 css20 獲取

~~完，我是刷碗，勵志等退休后，要回家擺地攤的人，我們下期見！

作者：niemvuilaptrin 譯者：前端小智來源：medium 原文：https://niemvuilaptnh.medium.com/23-border-css-javasript-beautiful-in-website-7286a05e0ad7

在線咨詢

上一篇：ThinkPHP之文件上傳一氣呵成就是這么暢快（RN
下一篇：小技巧，提升讀屏操作體驗

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css實現漸變色圓角邊框

標

基礎版本

簡化HTML結構版：使用偽元素

進階版：使用background相關屬性

缺陷

漸變邊框動畫

CSS Animation Effect Border

懸停

SVG

Design For Button Border

Create CSS Border Using SVG

Beautiful CSS Border For Button

Gradient Border

Create Border Animation Css

Striped Outline Button CSS

Image Border Animation CSS

Hover Border

Border SVG Ellipse

Create Circle Border Gradient

Border Shadow Animation

Motion With Border Radius CSS

Border Card CSS

Animation Border

Gradient Border HTML CSS

您的項目需求