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

您的项目需求