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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          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


          主站蜘蛛池模板: 国产AV天堂无码一区二区三区 | 国产一区二区四区在线观看| 精品久久综合一区二区| 欧美人妻一区黄a片| 日韩一区二区三区视频| 中文字幕在线播放一区| 亚洲av永久无码一区二区三区| 女人18毛片a级毛片一区二区| 一区二区视频在线免费观看| 日韩精品一区二区三区中文| 精品中文字幕一区在线| 精品无码av一区二区三区| 亚洲乱码国产一区网址| 成人H动漫精品一区二区| 文中字幕一区二区三区视频播放| 免费无码一区二区三区蜜桃大| 国产av成人一区二区三区| 天天综合色一区二区三区| 亚洲成在人天堂一区二区| 日韩精品一区二区三区中文字幕| 中文字幕一区二区精品区| 国模吧一区二区三区| 日韩人妻无码一区二区三区久久99 | 国产精品久久久久久一区二区三区| 成人区精品人妻一区二区不卡| 韩国精品一区二区三区无码视频| 国产成人精品视频一区二区不卡 | 久久99国产精品一区二区| 一区二区国产精品| 欧洲精品码一区二区三区免费看 | 久久国产视频一区| 鲁丝片一区二区三区免费| 亚洲爽爽一区二区三区| 91国在线啪精品一区| 国产熟女一区二区三区四区五区| 99精品久久精品一区二区| 国产情侣一区二区三区| 91精品一区国产高清在线| 久久青草精品一区二区三区| 国产精品视频一区二区三区四 | 伊人久久一区二区三区无码 |