css實(shí)現(xiàn)漸變色圓角邊框

標(biāo)

使用border-image可以設(shè)置漸變色邊框，但是當(dāng)它與border-radius組合使用時(shí)，兩者卻無(wú)法兼容。

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

基礎(chǔ)版本

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

HTML

復(fù)制代碼

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

CSS

復(fù)制代碼

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

簡(jiǎn)化HTML結(jié)構(gòu)版：使用偽元素

使用偽元素充當(dāng)背景也同樣可以達(dá)到上述效果，注意設(shè)置z-index將偽元素置于內(nèi)容之下

HTML

復(fù)制代碼

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

CSS

復(fù)制代碼

.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;/* 邊框?qū)挾?*/  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于內(nèi)容之下 */ }

進(jìn)階版：使用background相關(guān)屬性

給一個(gè)div設(shè)置兩個(gè)不同大小的背景，從而利用兩個(gè)背景制造面積差，也可以實(shí)現(xiàn)上述效果。

如何給div設(shè)置兩個(gè)背景？

使用background-image屬性設(shè)置兩組顏色，一組是內(nèi)容顏色，另一組是border邊框顏色，用逗號(hào)隔開(kāi)。

如何將兩個(gè)背景設(shè)置成不同大??？

可以使用background-clip 屬性，該屬性規(guī)定了背景的繪制區(qū)域。給一組設(shè)置為padding-box（背景繪制區(qū)域從內(nèi)邊距框開(kāi)始），第二組為border-box（背景繪制區(qū)域延伸至邊框）。

此時(shí)的效果如下：

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

如何更改背景繪制區(qū)域的起點(diǎn)？

使用background-origin屬性，該屬性規(guī)定了背景的繪制區(qū)域相對(duì)于什么位置來(lái)定位。給一組設(shè)置為padding-box（背景繪制區(qū)域以 padding 區(qū)域?yàn)閰⒖迹诙M為border-box（背景繪制區(qū)域以 border 區(qū)域?yàn)閰⒖迹?/p>

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

HTML

復(fù)制代碼

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

CSS

復(fù)制代碼

.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);}

缺陷

該思路無(wú)法實(shí)現(xiàn)透明底的漸變色圓角邊框。

性漸變:

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

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

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

對(duì)于線性漸變的方向,只要設(shè)置起點(diǎn)即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度來(lái)表示,

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

IE10以下的瀏覽器不支持此語(yǔ)法, 建議使用chrome瀏覽器或其他瀏覽器來(lái)瀏覽下面的范例

<!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);*/



    /*復(fù)雜演示 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>

重復(fù)的線性漸變

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

<!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>

我們可以使用漸變工具來(lái)生成gradient語(yǔ)法

Ultimate CSS Gradient Generator

網(wǎng)址：http://www.colorzilla.com/gradient-editor/

Orientation: 漸變方向

天，分享一波唯美的邊框，可增加我們的項(xiàng)目"亮"點(diǎn)，讓用戶愛(ài)起來(lái)。

漸變邊框動(dòng)畫

事例地址：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

所有源碼可關(guān)注《JavaScript 每日一練》后臺(tái)回復(fù) css20 獲取

~~完，我是刷碗，勵(lì)志等退休后，要回家擺地?cái)偟娜?，我們下期?jiàn)！

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

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

css實(shí)現(xiàn)漸變色圓角邊框

標(biāo)

基礎(chǔ)版本

簡(jiǎn)化HTML結(jié)構(gòu)版：使用偽元素

進(jìn)階版：使用background相關(guān)屬性

缺陷

漸變邊框動(dòng)畫

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

您的項(xiàng)目需求