当前位置： 文江博客话题详情

如何在CSS中制作渐变边框

发布于 2024-08-30 12:32:03 字数 162 浏览 6 评论 0原文

我正在尝试将渐变应用于边框，我认为这就像这样做一样简单：

border-color: -moz-linear-gradient(top, #555555, #111111);

但这不起作用。

有谁知道边框渐变的正确方法是什么？

原文

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

But this does not work.

Does anyone know what is the correct way to do border gradients?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（23）

风筝有风，海豚有海 2024-09-06 12:32:03

border-image 属性可以完成此任务。您还需要指定 border-style 和 border-width。

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}
<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

详细了解 MDN。

The border-image property can accomplish this. You'll need to specify border-style and border-width too.

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px; /* this doesn't work */
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}
<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

Read more on MDN.

回复 原文
丑丑阿 2024-09-06 12:32:03

我会使用背景渐变和填充来代替边框。外观相同，但更容易。

一个简单的例子：

.g {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14, 173, 173)), color-stop(0.67, rgb(0, 255, 255)));
  background-image: -moz-linear-gradient(center bottom, rgb(14, 173, 173) 33%, rgb(0, 255, 255) 67%);
  padding: 2px;
}

.g>div {
  background: #fff;
}
<div class="g">
  <div>bla</div>
</div>

正如 Walter Schwarz 指出的那样，您还可以利用 ::before 选择器：

body {
  padding: 20px;
}

.circle {
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
  border-radius: 100%;
  position: relative;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.circle::before {
  border-radius: 100%;
  content: '';
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  position: absolute;
  z-index: -1;
}
<div class="circle"></div>

Instead of borders, I would use background gradients and padding. Same look, but much easier.

A simple example:

.g {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14, 173, 173)), color-stop(0.67, rgb(0, 255, 255)));
  background-image: -moz-linear-gradient(center bottom, rgb(14, 173, 173) 33%, rgb(0, 255, 255) 67%);
  padding: 2px;
}

.g>div {
  background: #fff;
}
<div class="g">
  <div>bla</div>
</div>

You can also leverage the ::before selector as Walter Schwarz pointed out:

body {
  padding: 20px;
}

.circle {
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
  border-radius: 100%;
  position: relative;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.circle::before {
  border-radius: 100%;
  content: '';
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  position: absolute;
  z-index: -1;
}
<div class="circle"></div>

回复 原文
对你而言 2024-09-06 12:32:03

border-image-slice 将扩展 CSS border-image 渐变

这（据我所知）可以防止将“图像”默认切片为多个部分 - 没有它，如果边框位于一个部分上，则不会出现任何内容仅侧面，如果它围绕整个元素，则每个角会出现四个微小的渐变。

body{
  border: 16px solid transparent;
  border-image: linear-gradient(45deg, red , yellow);
  border-image-slice: 1;
  height: 120px;
  border-radius: 10px;  /* will have no effect */
}

border-image-slice will extend a CSS border-image gradient

This (as I understand it) prevents the default slicing of the "image" into sections - without it, nothing appears if the border is on one side only, and if it's around the entire element four tiny gradients appear in each corner.

body{
  border: 16px solid transparent;
  border-image: linear-gradient(45deg, red , yellow);
  border-image-slice: 1;
  height: 120px;
  border-radius: 10px;  /* will have no effect */
}

回复 原文
苦行僧 2024-09-06 12:32:03

Mozilla 目前仅支持 CSS 渐变作为 background-image 属性的值，以及简写背景。

— https://developer.mozilla.org/en/CSS/-moz-线性渐变

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

— http://www.cssportal.com/css3-preview /边框.htm

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.

— https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

— http://www.cssportal.com/css3-preview/borders.htm

回复 原文
悸初 2024-09-06 12:32:03

您可以在不删除边框半径的情况下实现此目的 background, < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip" rel="noreferrer">background-clip 和 背景来源：

<style>
.border-gradient-rounded {
  /* Border */
  border: 4px solid transparent;
  border-radius: 20px;
  background: 
    linear-gradient(to right, white, white), 
    linear-gradient(to right, red , blue); 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  
  /* Other styles */
  width: 100px;
  height: 40px;
  padding: 12px;
}
</style>

<div class="border-gradient-rounded">
  Content
</div>

基本上，这会将白色背景定位在渐变背景上，从内边框剪切白色背景，并从外边框剪切渐变背景。这就是为什么您需要将边框定义为实心透明。

归功于此开发帖子中的方法 2。

You can achieve this without removing the border radius with background, background-clip, and background-origin:

<style>
.border-gradient-rounded {
  /* Border */
  border: 4px solid transparent;
  border-radius: 20px;
  background: 
    linear-gradient(to right, white, white), 
    linear-gradient(to right, red , blue); 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  
  /* Other styles */
  width: 100px;
  height: 40px;
  padding: 12px;
}
</style>

<div class="border-gradient-rounded">
  Content
</div>

Basically, this positions the white background over the gradient background, clips the white background from the inner border, and clips the gradient background from the outer border. This is why you need to define the border as solid transparent.

Credit to Method 2 from this dev.to post.

回复 原文
薄荷→糖丶微凉 2024-09-06 12:32:03

试试这个，在 web-kit 上工作得很好

.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<div class="border">Hello!</div>

Try this, works fine on web-kit

.border { 
    width: 400px;
    padding: 20px;
    border-top: 10px solid #FFFF00;
    border-bottom:10px solid #FF0000;
    background-image: 
        linear-gradient(#FFFF00, #FF0000),
        linear-gradient(#FFFF00, #FF0000)
    ;
    background-size:10px 100%;
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
}
<div class="border">Hello!</div>

回复 原文
追风人 2024-09-06 12:32:03

这是一个技巧，但在某些情况下，您可以通过使用背景图像指定渐变，然后使用框阴影遮盖实际背景来实现此效果。例如：

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

来自： http://blog.nateps.com/the-elusive- css-边框-渐变

It's a hack, but you can achieve this effect in some cases by using the background-image to specify the gradient and then masking the actual background with a box-shadow. For example:

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

From: http://blog.nateps.com/the-elusive-css-border-gradient

回复 原文
酸甜透明夹心 2024-09-06 12:32:03

尝试下面的例子：

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}

Try the below example:

.border-gradient {
      border-width: 5px 5px 5px 5px;
      border-image: linear-gradient(45deg, rgba(100,57,242,1) 0%, rgba(242,55,55,1) 100%);
      border-image-slice: 9;
      border-style: solid;
}
回复 原文
不忘初心 2024-09-06 12:32:03

试试这个，它对我有用。

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}
<div></div>

链接是小提琴
https://jsfiddle.net/yash009/kayjqve3/1/

Try this, it worked for me.

div{
  border-radius: 20px;
  height: 70vh;
  overflow: hidden;
}

div::before{
  content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(to top, red 0%, blue 100%);
  border-image-slice: 1;
}
<div></div>

The link is to the fiddle
https://jsfiddle.net/yash009/kayjqve3/1/

回复 原文
翻身的咸鱼 2024-09-06 12:32:03

Webkit 支持边框渐变，现在接受 Mozilla 格式的渐变。

Firefox 声称以两种方式支持渐变：

  1. 将 border-image 与 border-image-source 一起使用
  2. 使用右边框颜色（右/左/上/下）

IE9不支持。

Webkit supports gradients in borders, and now accepts the gradient in the Mozilla format.

Firefox claims to support gradients in two ways:

  1. Using border-image with border-image-source
  2. Using border-right-colors (right/left/top/bottom)

IE9 has no support.

回复 原文
和我恋爱吧 2024-09-06 12:32:03

我同意萨伊蒙的观点。他和昆汀的答案的唯一问题是跨浏览器兼容性。

HTML：

<div class="g">
    <div>bla</div>
</div>

CSS：

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }

I agree with szajmon. The only problem with his and Quentin's answers is cross-browser compatibility.

HTML:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }
回复 原文
゛时过境迁 2024-09-06 12:32:03

的渐变边框示例

使用 border-image css 属性

归功于：Mozilla 中的边框图像

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}
<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>

Example for Gradient Border

Using border-image css property

Credits to : border-image in Mozilla

.grad-border {
  height: 1px;
  width: 85%;
  margin: 0 auto;
  display: flex;
}
.left-border, .right-border {
  width: 50%;
  border-bottom: 2px solid #695f52;
  display: inline-block;
}
.left-border {
  border-image: linear-gradient(270deg, #b3b3b3, #fff) 1;
}
.right-border {
  border-image: linear-gradient(90deg, #b3b3b3, #fff) 1;
}
<div class="grad-border">
  <div class="left-border"></div>
  <div class="right-border"></div>
</div>

回复 原文
千里故人稀 2024-09-06 12:32:03

实现相同效果的另一个技巧是利用多个背景图像，IE9+、较新的 Firefox 和大多数基于 WebKit 的浏览器都支持该功能：http://caniuse.com/#feat=multibackgrounds

在 IE6-8 中还有一些使用多个背景的选项：http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

例如，假设您想要一个 5 像素宽的左边框，它是从蓝色到白色的线性渐变。将渐变创建为图像并导出为 PNG。列出左边框渐变背景之后的所有其他 CSS 背景：

#theBox {
    background:
        url(/images/theBox-leftBorderGradient.png) left no-repeat,
        ...;
}

您可以通过更改背景 速记属性。

这是给定示例的 jsFiddle： http://jsfiddle.net/jLnDt/

Another hack for achieving the same effect is to utilize multiple background images, a feature that is supported in IE9+, newish Firefox, and most WebKit-based browsers: http://caniuse.com/#feat=multibackgrounds

There are also some options for using multiple backgrounds in IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/

For example, suppose you want a 5px-wide left border that is a linear gradient from blue to white. Create the gradient as an image and export to a PNG. List any other CSS backgrounds after the one for the left border gradient:

#theBox {
    background:
        url(/images/theBox-leftBorderGradient.png) left no-repeat,
        ...;
}

You can adapt this technique to top, right, and bottom border gradients by changing the background position part of the background shorthand property.

Here is a jsFiddle for the given example: http://jsfiddle.net/jLnDt/

回复 原文
萝莉病 2024-09-06 12:32:03

这是一个具有透明背景的渐变边框，可与 border-radius 一起使用

.gradient-border {
  border-radius: 999px;
  padding: 10px 3rem;
  display: inline-block;
  position: relative;
  background: transparent;
  border: none;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

现场演示： https://jsfiddle.net /jbernier/0eypxc74/1/

Here's a gradient border with transparent background that works with border-radius

.gradient-border {
  border-radius: 999px;
  padding: 10px 3rem;
  display: inline-block;
  position: relative;
  background: transparent;
  border: none;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 9999px;
  background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

Live demo: https://jsfiddle.net/jbernier/0eypxc74/1/

回复 原文
影子的影子 2024-09-06 12:32:03

对于跨浏览器支持，您还可以尝试使用 :before 或 :after 伪元素模仿渐变边框，具体取决于您想要执行的操作。

For cross-browser support you can try as well imitate a gradient border with :before or :after pseudo elements, depends on what you want to do.

回复 原文
攒一口袋星星 2024-09-06 12:32:03

由于我们在使用边框图像时无法添加边框半径，因此我能够通过使用 @NFTMaster 建议的技巧来解决该问题，如下所示：

background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;

Since we cannot add border-radius when we use the border-image, I was able to solve the problem by using a trick as suggest by @NFTMaster as following:

background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
回复 原文
反目相谮 2024-09-06 12:32:03

我发现使用 tailwind 效果很好（将其添加到全局 index.css 中）：

.gradient-border {
    @apply relative;
  }

.gradient-border::before {
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  @apply content-[""] rounded-xl p-[1.5px] inset-0 absolute 
  bg-gradient-to-tl
  from-slate-500/40
  via-transparent 
  to-slate-500/40
 }

然后在您需要的元素上使用渐变边框
这相当于：

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  border-radius: 12px;
  padding: 2px;
  inset: 0;
  position: absolute;
  background: linear-gradient(45deg, black, transparent, black);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.some-other-styling {
  width: 200px;
  height: 50px;
}
<div class="gradient-border some-other-styling"/>

i found this to be working well using tailwind (added this to global index.css):

.gradient-border {
    @apply relative;
  }

.gradient-border::before {
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  @apply content-[""] rounded-xl p-[1.5px] inset-0 absolute 
  bg-gradient-to-tl
  from-slate-500/40
  via-transparent 
  to-slate-500/40
 }

then use the gradient-border on the element you need
this is equivalent to:

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  border-radius: 12px;
  padding: 2px;
  inset: 0;
  position: absolute;
  background: linear-gradient(45deg, black, transparent, black);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.some-other-styling {
  width: 200px;
  height: 50px;
}
<div class="gradient-border some-other-styling"/>

回复 原文
幽梦紫曦～ 2024-09-06 12:32:03

尝试这个代码

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

或者参考这个小提琴： http://jsfiddle.net/necolas/vqnk9/

try this code

.gradientBoxesWithOuterShadows { 
height: 200px;
width: 400px; 
padding: 20px;
background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
}

or maybe refer to this fiddle: http://jsfiddle.net/necolas/vqnk9/

回复 原文
情深已缘浅 2024-09-06 12:32:03

这是一种很好的半跨浏览器方式，可以使渐变边框向下淡出一半。只需将 color-stop 设置为 rgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

用法说明：

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops

更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Here's a nice semi cross-browser way to have gradient borders that fade out half way down. Simply by setting the color-stop to rgba(0, 0, 0, 0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

Usage explained:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops

More here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

回复 原文
天冷不及心凉 2024-09-06 12:32:03

使用 HTML 和CSS

<div class="gradientBorder">
   <div class="gradientBorderModule">
     Hello Gradient Border
   </div>
</div>

.gradientBorder {
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, yellow);
  padding: 3px;
}

.gradientBorderModule {
  background: black;
  color: white;
  padding: 2rem;
}

使用 Tailwind CSS

<div class="rounded-xl bg-gradient-to-r from-red-500 to-yellow-500 p-[0.1rem] relative">
    <div class="flex rounded-xl bg-black text-white p-1">
        Hello Gradient Border
    </div>
</div>

Using HTML & CSS

<div class="gradientBorder">
   <div class="gradientBorderModule">
     Hello Gradient Border
   </div>
</div>

.gradientBorder {
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, yellow);
  padding: 3px;
}

.gradientBorderModule {
  background: black;
  color: white;
  padding: 2rem;
}

Using Tailwind CSS

<div class="rounded-xl bg-gradient-to-r from-red-500 to-yellow-500 p-[0.1rem] relative">
    <div class="flex rounded-xl bg-black text-white p-1">
        Hello Gradient Border
    </div>
</div>
回复 原文
拒绝两难 2024-09-06 12:32:03

这里有一篇关于此的很好的 css 技巧文章：https://css-tricks。 com/gradient-borders-in-css/

我能够使用多个背景和 background-origin 属性想出一个非常简单的单一元素解决方案。

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

这种方法的优点是：

  1. 它不受 z-index 的影响
  2. 只需更改透明边框的宽度即可轻松缩放

检查一下： https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

There is a nice css tricks article about this here: https://css-tricks.com/gradient-borders-in-css/

I was able to come up with a pretty simple, single element, solution to this using multiple backgrounds and the background-origin property.

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

The nice things about this approach are:

  1. It isn’t affected by z-index
  2. It can scale easily by just changing the width of the transparent border

Check it out: https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100

回复 原文
記憶穿過時間隧道 2024-09-06 12:32:03

使用伪元素的按钮边框渐变

.btn-wrap{
    position: relative;
    margin-left: 10px;
    border-radius: 7px;
    width:fit-content;
    margin:50px;
}
.btn-wrap::before{
    content: "";
    position: absolute;
    left: -3px;
    top: -2.5px;
    border-radius: 10px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(201, 134, 34, 1) 0%, rgba(253, 227, 157, 1) 50%, rgba(227, 148, 15, 1) 100%);
    width: calc(100% + 6px);
    height: calc(100% + 5px);
}
.btn{
    margin: 0px;
    background-color: #4c0e0e;
    border-radius: 10px;
    color: #eabb4c;
    padding: 10px 20px;
    border:none;
    font-size:20px;
}
<div class="btn-wrap">
  <button class="btn">Nomination</button>
</div>

Button Border Gradient using pseudo-element

.btn-wrap{
    position: relative;
    margin-left: 10px;
    border-radius: 7px;
    width:fit-content;
    margin:50px;
}
.btn-wrap::before{
    content: "";
    position: absolute;
    left: -3px;
    top: -2.5px;
    border-radius: 10px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(201, 134, 34, 1) 0%, rgba(253, 227, 157, 1) 50%, rgba(227, 148, 15, 1) 100%);
    width: calc(100% + 6px);
    height: calc(100% + 5px);
}
.btn{
    margin: 0px;
    background-color: #4c0e0e;
    border-radius: 10px;
    color: #eabb4c;
    padding: 10px 20px;
    border:none;
    font-size:20px;
}
<div class="btn-wrap">
  <button class="btn">Nomination</button>
</div>

回复 原文
愁以何悠 2024-09-06 12:32:03

试试这个，它支持透明背景和圆角，但不是那么简洁。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <mask id="cut-off-center">
            <rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="white"/>
            <rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="black"/>
        </mask>
        <linearGradient id="border">
            <stop offset="0" stop-color="rgba(0, 164, 255, 1)"/>
            <stop offset="1" stop-color="rgba(0, 127, 216, .47)"/>
        </linearGradient>
        <linearGradient id="background">
            <stop offset="0" stop-color="#72C5FF"/>
            <stop offset="1" stop-color="#0090FE"/>
        </linearGradient>
    </defs>
    <rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="url(#border)" mask="url(#cut-off-center)"/>
    <rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="url(#background)" fill-opacity="0.3"/>
</svg>

您也可以将其用作背景图像。

.box {
  width: 78px;
  height: 28px;
  color: orange;
  text-align: center;
  line-height: 28px;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiPgogICAgPGRlZnM+CiAgICAgICAgPG1hc2sgaWQ9ImN1dC1vZmYtY2VudGVyIj4KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iNzgiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjEiIHk9IjEiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc2IiBoZWlnaHQ9IjI2IiBmaWxsPSJibGFjayIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJvcmRlciI+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiYSgwLCAxNjQsIDI1NSwgMSkiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDEyNywgMjE2LCAuNDcpIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3MkM1RkYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA5MEZFIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjI4IiBmaWxsPSJ1cmwoI2JvcmRlcikiIG1hc2s9InVybCgjY3V0LW9mZi1jZW50ZXIpIi8+CiAgICA8cmVjdCB4PSIxIiB5PSIxIiByeD0iMiIgcnk9IjIiIHdpZHRoPSI3NiIgaGVpZ2h0PSIyNiIgZmlsbD0idXJsKCNiYWNrZ3JvdW5kKSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+')
}
<div class="box">text</div>

Try this which supports transparent background and rounded corner not that concise though.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <mask id="cut-off-center">
            <rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="white"/>
            <rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="black"/>
        </mask>
        <linearGradient id="border">
            <stop offset="0" stop-color="rgba(0, 164, 255, 1)"/>
            <stop offset="1" stop-color="rgba(0, 127, 216, .47)"/>
        </linearGradient>
        <linearGradient id="background">
            <stop offset="0" stop-color="#72C5FF"/>
            <stop offset="1" stop-color="#0090FE"/>
        </linearGradient>
    </defs>
    <rect x="0" y="0" rx="2" ry="2" width="78" height="28" fill="url(#border)" mask="url(#cut-off-center)"/>
    <rect x="1" y="1" rx="2" ry="2" width="76" height="26" fill="url(#background)" fill-opacity="0.3"/>
</svg>

also you can use it as background image.

.box {
  width: 78px;
  height: 28px;
  color: orange;
  text-align: center;
  line-height: 28px;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiPgogICAgPGRlZnM+CiAgICAgICAgPG1hc2sgaWQ9ImN1dC1vZmYtY2VudGVyIj4KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjIiIHJ5PSIyIiB3aWR0aD0iNzgiIGhlaWdodD0iMjgiIGZpbGw9IndoaXRlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjEiIHk9IjEiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc2IiBoZWlnaHQ9IjI2IiBmaWxsPSJibGFjayIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJvcmRlciI+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0icmdiYSgwLCAxNjQsIDI1NSwgMSkiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDEyNywgMjE2LCAuNDcpIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJhY2tncm91bmQiPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3MkM1RkYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA5MEZFIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIyIiByeT0iMiIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjI4IiBmaWxsPSJ1cmwoI2JvcmRlcikiIG1hc2s9InVybCgjY3V0LW9mZi1jZW50ZXIpIi8+CiAgICA8cmVjdCB4PSIxIiB5PSIxIiByeD0iMiIgcnk9IjIiIHdpZHRoPSI3NiIgaGVpZ2h0PSIyNiIgZmlsbD0idXJsKCNiYWNrZ3JvdW5kKSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+')
}
<div class="box">text</div>

回复 原文
~没有更多了~

关于作者

只是偏爱你

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文