如何通过CSS创建带有渐变色条纹边框的矩形? [英] How to create Rectangle With Gradient Color Stripes Border via CSS?
问题描述
我要创建带有渐变色条纹边框的圆角矩形.
我想使用 img 标签或 div 标签包含图像和渐变条纹边框.
它的外观如下:
我尝试搜索一下，发现该(SCSS)示例: https://jsfiddle.net/rami7250/yujsz7wf/
我得到了这个SCSS代码:
.module {背景:白色；边框:1px实心#ccc；保证金:3％；>h2 {填充:1rem;边距:0 0 0.5rem 0;}>p {填充:0 1rem;}/*动画:加宽10s线性交替无穷大； */}.stripe-1 {白颜色;背景:repeating-linear-gradient(45度#606dbc，#606dbc 10px，#465298 10px，#465298 20px);} 如您所见，该功能仅影响背景，而不影响边框.
如何使该矩形通过CSS/SCSS在其边框中显示渐变色条纹?
一种选择是在所需模式中将 linear-gradient 用作 background-image 和将所需的内容放在此背景之上.只要内容是图像或任何文本，或者不需要透明的内容，这种方法就可以使用.通过将鼠标悬停在元素上，可以看到输出也具有响应性.
仅包含条带:(在渐变顶部放置白色层以仅显示条带)
div {高度:250像素；宽度:400像素；背景:线性渐变(白色，白色)，线性梯度(60度，橙色0％，橙色3.5％，白色3.5％，白色7％，粉红色7％，粉红色10.5％，黑色10.5％，黑色14％，棕色14％，棕色17.5％，水色17.5％，浅绿色21％，绿色21％，绿色25％，橙色25％，橙色28.5％，白色28.5％，白色32％，hotpink 32％，hotpink 35.5％，黑色35.5％，黑色39％，棕色39％，棕色42.5％，浅绿色42.5％，浅绿色46％，绿色46％，绿色50％，橙色50％，橙色53.5％，白色53.5％，白色57％，粉红色57％，粉红色60.5％，黑色60.5％，黑色64％，棕色64％，棕色67.5％，浅绿色67.5％，浅绿色71％，绿色71％，绿色75％，橙色75％，橙色78.5％，白色78.5％，白色82％，粉红色82％，粉红色85.5％，黑色85.5％，黑色89％，棕色89％，棕色92.5％，水色92.5％，水色96％，绿色96％，绿色100％)；填充:10px 20px;border-radius:20px;background-origin:内容框，填充框；background-clip:内容框，填充框；}/*仅用于演示*/div {过渡:全1；}div:hover {高度:300像素；宽度:500像素；} < div></div> 图像包含在 div 中:
div {高度:250像素；宽度:400像素；背景:线性渐变(白色，白色)，线性渐变(60度，橙色0％，橙色3.5％，白色3.5％，白色7％，热粉红色7％，热粉红色10.5％，黑色10.5％，黑色14％，棕色14％，棕色17.5％，浅绿色17.5％，浅红色21％，绿色21％，绿色25％，橙色25％，橙色28.5％，白色28.5％，白色32％，粉红色32％，粉红色35.5％，黑色35.5％，黑色39％，棕色39％，棕色42.5％，浅绿色42.5％，浅绿色46％，绿色46％，绿色50％，橙色50％，橙色53.5％，白色53.5％，白色57％，hotpink 57％，hotpink60.5％，黑色60.5％，黑色64％，棕色64％，棕色67.5％，浅绿色67.5％，浅绿色71％，绿色71％，绿色75％，橙色75％，橙色78.5％，白色78.5％，白色82％，hotpink 82％，hotpink 85.5％，黑色85.5％，黑色89％，棕色89％，棕色92.5％，水色92.5％，水色96％，绿色96％，绿色100％);填充:10px 20px;border-radius:20px;background-origin:内容框，填充框；background-clip:内容框，填充框；}img {高度:250像素；宽度:400像素；}/*仅用于演示*/div，img {过渡:全1；}div:hover，div:hover img {高度:300像素；宽度:500像素；} < div>< img src ='http://lorempixel.com/400/250/nature/1'/></div> 具有重复的线性渐变:(感谢 vals 用于创建演示)
div {高度:250像素；宽度:400像素；背景:线性渐变(白色，白色)，重复线性渐变(60度，橙色0％，橙色3.5％，白色3.5％，白色7％，热粉红色7％，热粉红色10.5％，黑色10.5％，黑色14％，棕色14％，棕色17.5％，水色17.5％，水色21％，绿色21％，绿色25％)；背景附件:padding-box，border-box；填充:10px 20px;border-radius:20px;background-origin:内容框，填充框；background-clip:内容框，填充框；}/*仅用于演示*/div {过渡:全1；}div:hover {高度:300像素；宽度:500像素；} < div></div> 注意:使用倾斜的渐变时，很难避免锯齿状的边缘.可以通过调整颜色停止点来减少它们.
I want to create Round Edges Rectangle With Gradient Color Stripes Border.
I want to use the img tag or div tag to include the image and the Gradient Striped Border.
This is how it needs to look like:
I try to search around and i found that (SCSS) example: https://jsfiddle.net/rami7250/yujsz7wf/
and i got this SCSS code:
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
/*animation: widen 10s linear alternate infinite;*/
}
.stripe-1 {
color: white;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
As you can see, that feature effect only background and not border.
How do I make that Rectangle to display Gradient Color Stripes in his Border Via CSS/SCSS?
One option would be to use a linear-gradient in the required pattern as background-image and put the required content on top of this background. This approach would work as long as the content, be it image or any text or whatever doesn't require to be transparent. The output is also responsive as can be seen by hovering on the element.
With just the strips: (a white layer is placed on top of the gradient to show only the strips)
div {
height: 250px;
width: 400px;
background: linear-gradient(white, white),
linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%, orange 25%, orange 28.5%, white 28.5%, white 32%, hotpink 32%, hotpink 35.5%, black 35.5%, black 39%, brown 39%, brown 42.5%, aqua 42.5%, aqua 46%, green 46%, green 50%, orange 50%, orange 53.5%, white 53.5%, white 57%, hotpink 57%, hotpink 60.5%, black 60.5%, black 64%, brown 64%, brown 67.5%, aqua 67.5%, aqua 71%, green 71%, green 75%, orange 75%, orange 78.5%, white 78.5%, white 82%, hotpink 82%, hotpink 85.5%, black 85.5%, black 89%, brown 89%, brown 92.5%, aqua 92.5%, aqua 96%, green 96%, green 100%);
padding: 10px 20px;
border-radius: 20px;
background-origin: content-box, padding-box;
background-clip: content-box, padding-box;
}
/* just for demo */
div {
transition: all 1s;
}
div:hover {
height: 300px;
width: 500px;
}
<div></div>
With image inside the div:
div {
height: 250px;
width: 400px;
background: linear-gradient(white, white), linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%, orange 25%, orange 28.5%, white 28.5%, white 32%, hotpink 32%, hotpink 35.5%, black 35.5%, black 39%, brown 39%, brown 42.5%, aqua 42.5%, aqua 46%, green 46%, green 50%, orange 50%, orange 53.5%, white 53.5%, white 57%, hotpink 57%, hotpink 60.5%, black 60.5%, black 64%, brown 64%, brown 67.5%, aqua 67.5%, aqua 71%, green 71%, green 75%, orange 75%, orange 78.5%, white 78.5%, white 82%, hotpink 82%, hotpink 85.5%, black 85.5%, black 89%, brown 89%, brown 92.5%, aqua 92.5%, aqua 96%, green 96%, green 100%);
padding: 10px 20px;
border-radius: 20px;
background-origin: content-box, padding-box;
background-clip: content-box, padding-box;
}
img {
height: 250px;
width: 400px;
}
/* just for demo */
div, img {
transition: all 1s;
}
div:hover, div:hover img {
height: 300px;
width: 500px;
}
<div>
<img src='http://lorempixel.com/400/250/nature/1' />
</div>
With repeating linear gradient: (thanks to vals for creating the demo)
div {
height: 250px;
width: 400px;
background: linear-gradient(white,white), repeating-linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%);
background-attachment: padding-box, border-box;
padding: 10px 20px;
border-radius: 20px;
background-origin: content-box, padding-box;
background-clip: content-box, padding-box;
}
/* just for demo */
div {
transition: all 1s;
}
div:hover {
height: 300px;
width: 500px;
}
<div>
</div>
Note: The jagged edges are something that are tough to avoid when using angled gradients. They can be reduced by adjusting the color stop points.
这篇关于如何通过CSS创建带有渐变色条纹边框的矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
