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

是否可以制作渐变边框？

发布于 2024-11-18 19:13:49 字数 98 浏览 3 评论 0原文

正如标题所述，是否可以在 CSS3 中制作渐变边框，如果可以的话如何制作？ 我知道你可以制作渐变背景，并且有很多生成器可以实现这一点，但我还没有找到一个可以创建渐变边框代码的生成器。

原文

As the title states, is it possible to make a gradient border in CSS3 and if so how?
I know that you can make gradient backgrounds and there are many generators for that, but I am yet to find one that creates the code for a gradient border.

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

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

发布评论

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

评论（10）

楠木可依 2024-11-25 19:13:49

1.

嗯.. 这不是花哨的 css3，但这里有一个可能的解决方案：

我之前为其他东西制作了这个示例，我只是更改了 #childWrap

http://jsfiddle.net/qD4zd/1/ （请注意，渐变不是很灵活，因为它是用图像完成的。）

基本思想是那如果您想要使用带有渐变、图案或图像的边框来框住元素，则应该将该元素包装在另一个用作边框的元素内。

2.

更灵活的渐变：您可能想尝试的另一件事是 http://www.css3pie.com并使用外部元素中的渐变背景创建边框，如我的示例 jsfiddle 中所示。

或

http://www.colorzilla.com/gradient-editor/

( http://jsfiddle.net/qD4zd/2/ )

3.

第三点..第一种方法可以是制作成更多通过使用实际的 标签进行灵活的调整，以便您强制图像具有特定的高度和宽度..甚至看起来不错。

1.

Well.. this is no fancy css3 but heres one possible solution:

I made this example for something else before and i just changed the background url of #childWrap

http://jsfiddle.net/qD4zd/1/ ( note that the gradient isnt very flexible as it is done with images. )

Basic idea is that if you have element that you want to frame with a border with a gradient, pattern or just image you should wrap that element inside another which you will use as the border.

2.

A little more flexible gradient: Another thing you might want to try is http://www.css3pie.com and use the gradient background in outer element to create a border like in my example jsfiddle.

OR

http://www.colorzilla.com/gradient-editor/

( http://jsfiddle.net/qD4zd/2/ )

3.

On a third note.. The first method could be made into more flexible one by using actual <img> tag so that you force the image to be specific height and width.. could even look decent.

回复 原文
悟红尘 2024-11-25 19:13:49

下面是使用 CSS3 创建渐变阴影边框的可能性：

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

实际上，这将在边缘处创建一个半径为 10px 的内部阴影边框。

Here is a possibility to create a gradient shadow border with CSS3:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
    -ms-border-radius: 10px;
        border-radius: 10px;

border: 4px solid rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 0 20px #000;
   -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
        box-shadow: inset 0 0 20px #000;

Practically this will create an inner shadow border with 10px radius at the edges.

回复 原文
晨与橙与城 2024-11-25 19:13:49

无需做太多事情，只需添加以下代码即可：

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

只需将上述代码添加到元素中，border-image-slice 属性将设置元素的内部偏移量。

Nothing to do much just add following code:

 border-image: linear-gradient(to bottom, black 0%, white 100%);
  /* border-image-slice: 1;*/

just add above code to the element and border-image-slice property will set the inner offsets of the element.

回复 原文
财迷小姐 2024-11-25 19:13:49

带有线性渐变的边框。

HTMLCSS

<div id="input_parameters">
        ...Some HTML...
</div>

​

#input_parameters {
border: 10px solid transparent;

border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

border-image-slice: 1;
}

Border with linear gradient.

HTML

<div id="input_parameters">
        ...Some HTML...
</div>

CSS

#input_parameters {
border: 10px solid transparent;

border-image: linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

-webkit-border-image: -webkit-linear-gradient(#1e2d61 0%,#1f386e 19%,#203c72 20%,#203c73 20%,#266aa8 69%,#2775b5 84%,#2878b9 84%,#2879ba 85%,#297fc0 95%,#2d75ad 100%);

border-image-slice: 1;
}
回复 原文
酒浓于脸红 2024-11-25 19:13:49

你可以试试这个：

div {
  width: 170px;
  height: 48px;
  border-radius: 24px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
<div>button</div>

You can try this:

div {
  width: 170px;
  height: 48px;
  border-radius: 24px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #fff042, #ff5451);
  border-image-slice: 1;
  background-image: linear-gradient(to bottom, #f9e6e6, #c5e0c3), linear-gradient(to bottom, #fff042, #ff5451);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
<div>button</div>

回复 原文
伴我心暖 2024-11-25 19:13:49

这里是一个在 Firefox 下工作的渐变边框的例子：

#gradbor {
    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;
}

在你的 CSS 中尝试类似的东西，让它工作。

编辑：我不确定它是否适用于其他浏览器。

here is an example of a gradient border that would work under Firefox:

#gradbor {
    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;
}

Try something like that in your CSS for it to work.

EDIT: I'm not sure if it will work at all on other browsers.

回复 原文
∞觅青森が 2024-11-25 19:13:49

可能对你来说是其他工作，但我有非常简单的提示，只需将背景图像替换为边框图像即可

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;

may be other work for you but i have very simple tips for you just replace background-image to border-image like

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
background-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
background-color:#124f7e;

border-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.10, #124f7e), color-stop(0.90, #3b89c5) );
border-image: -moz-linear-gradient(center bottom, #124f7e 10%,#3b89c5 90% );
border-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b89c5', endColorstr='#124f7e'); /* for IE */
border-color:#124f7e;
回复 原文
梦在深巷 2024-11-25 19:13:49

我通过设置其 css 属性使用 span 元素作为边框。下面是我的代码

<div id="main_container">
        <div class="tl"></div>
        <div class="tr"></div>
        <div class="bl"></div>
        <div class="br"></div>
        <span class="borderH"></span>
        <span class="borderV"></span>
</div>

，这是我的 css -

   #main_container{
    position:relative;
    width:480px;
    height:480px;
    background:#f9f9f9;
    border:1px solid #ff0000;
    left:20%;
    top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%;  }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; } 
.borderH{
    position: absolute; left: 0; top: 50%;height:1px;width:100%;
    background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
    position: absolute; top: 0; left: 50%;width:1px;height:100%; 
    background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}

此代码将生成如下输出 https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing

i used the span element instead to use as border by setting its css property. below is my code

<div id="main_container">
        <div class="tl"></div>
        <div class="tr"></div>
        <div class="bl"></div>
        <div class="br"></div>
        <span class="borderH"></span>
        <span class="borderV"></span>
</div>

n here is my css -

   #main_container{
    position:relative;
    width:480px;
    height:480px;
    background:#f9f9f9;
    border:1px solid #ff0000;
    left:20%;
    top:100px;
}
.tl { position: absolute; top: 0; left: 0; /*background: #ff0000;*/ border-right:1px none #000;width:50%;height:50%;  }
.tr { position: absolute; top: 0; left: 50%;/*background: blue;*/ border-bottom:1px none #000;width:50%;height:50%;}
.bl { position: absolute; top: 50%; left: 0; /*background: yellow;*/ border-top:1px none #000;width:50%;height:50%; }
.br { position: absolute; top: 50%; left: 50%; /*background: #80ff80;*/border-left:1px none #000;width:50%;height:50%; } 
.borderH{
    position: absolute; left: 0; top: 50%;height:1px;width:100%;
    background: -webkit-linear-gradient(left, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(right, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}
.borderV{
    position: absolute; top: 0; left: 50%;width:1px;height:100%; 
    background: -webkit-linear-gradient(top, #ff0000 , #80ff80); /* For Safari */
    background: -o-linear-gradient(bottom, #ff0000, #80ff80); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #ff0000, #80ff80); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #ff0000 , #80ff80); /* Standard syntax (must be last) */
}

this code will generate the output like this https://drive.google.com/file/d/0B2sRswnexZtfUVlTM0t2dWI3cjA/edit?usp=sharing

回复 原文
来世叙缘 2024-11-25 19:13:49

这是一个创建彩色渐变边框的解决方案，就像您在 Gumroad 或 Vimeo 等网站顶部看到的那样，例如：

Gumroad 屏幕截图：彩色边框

<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>

.u-border-top-rainbow {
  border-style: solid;
  border-width: 30px 0 0 0;

   /* For a gradient repeated 3 times */
  border-image-source: repeating-linear-gradient(to right,
    hsla(   8,  78%, 63%, 1.00 ) 00.00%,
    hsla(   8,  78%, 63%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 33.33%
  );

  border-image-slice: 1;
}

Codepen：彩色 CSS 渐变边框，类似 Gumroad 或 Vimeo

渐变 < em>可以用双停止符号写成一半的大小，以这种方式：

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

……不幸的是，Safari 还不支持这种语法。

Here's a solution that creates a colorful gradient border, like you can see at the top of sites such as Gumroad or Vimeo, e.g.:

Gumroad screenshot: colorful border

<div class="u-border-top-rainbow">Lorem ipsum fu fu ma li ma coco go yo.</div>

.u-border-top-rainbow {
  border-style: solid;
  border-width: 30px 0 0 0;

   /* For a gradient repeated 3 times */
  border-image-source: repeating-linear-gradient(to right,
    hsla(   8,  78%, 63%, 1.00 ) 00.00%,
    hsla(   8,  78%, 63%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 03.03%,
    hsla(   9,  85%, 58%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 06.06%,
    hsla(  12, 100%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 09.09%,
    hsla( 352,  70%, 47%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 12.12%,
    hsla( 355,  76%, 38%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 15.15%,
    hsla(   2,  78%, 32%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 18.18%,
    hsla( 183, 100%, 30%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 21.21%,
    hsla( 183,  95%, 27%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 24.24%,
    hsla( 183, 100%, 22%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 27.27%,
    hsla(  43,  92%, 54%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 30.30%,
    hsla(  38, 100%, 48%, 1.00 ) 33.33%
  );

  border-image-slice: 1;
}

Codepen: Colorful CSS gradient border, à la Gumroad or Vimeo

The gradient could be written in half the size with the double stop notation, in this fashion:

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

…unfortunately, such syntax is not supported by Safari as of yet.

回复 原文
伴随着你 2024-11-25 19:13:49

只需使用::之前

.card::before{
           content: '';
          width: 100%;
          position: absolute;
          height: 5px;
          top:0;
          left: 0;
          border-radius:5px 5px 0 0;

          background-color: hsl(195, 100%, 50%);
    }

Just use ::before

.card::before{
           content: '';
          width: 100%;
          position: absolute;
          height: 5px;
          top:0;
          left: 0;
          border-radius:5px 5px 0 0;

          background-color: hsl(195, 100%, 50%);
    }
回复 原文
~没有更多了~

关于作者

謌踐踏愛綪

暂无简介

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

相关话题

更多

热门标签

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

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

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