我想为每个边框创建相同的线性渐变。为每个边框创建边框渐变
有5种颜色的边框渐变从
transparent to white to black to white to transparent
开始这样,我有透明的角落。
我该如何为所有4个边框做这个?
是否可以将线性渐变分配给边界?
旁注:应该在IE9 +没有太多精力跑别的IE10 +:P
我想为每个边框创建相同的线性渐变。为每个边框创建边框渐变
有5种颜色的边框渐变从
transparent to white to black to white to transparent
开始这样,我有透明的角落。
我该如何为所有4个边框做这个?
是否可以将线性渐变分配给边界?
旁注:应该在IE9 +没有太多精力跑别的IE10 +:P
如何使用径向渐变?虽然这只是一个模拟,但您可以看到基本效果。
.outer {
vertical-align:top;
display:inline-block;
height: 100px;
width: 100px;
position: relative;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.inner {
height: 90%;
width: 90%;
position: absolute;
left: 5%;
top: 5%;
background: white;
}
<div class="outer">
<div class="inner">
text
</div>
</div>
<div class="outer" style="height:100px; width:200px">
<div class="inner">
text
</div>
</div>
资源
注意
<=IE9
我必须选择最兼容的是这个!谢谢! – Pascal 2015-02-11 08:06:33
@帕斯卡尔:我认为两者都和其他tbh一样受到支持。但无论如何都给你提供相同的输出。:) – jbutler483 2015-02-11 08:12:40
其实他们给不同的输出一个是线性的另一个径向梯度。让我们说类似的输出... – Pascal 2015-02-12 09:29:33
你也可以使用多个线性渐变作为背景做到这一点,并将其定位片段。
要更改边框的大小/宽度,请修改background-size
中的20px值。 (注:根据所需的输出,你可能需要更改线性渐变百分比还有当你改变大小,但应该是相当直接的做。)对整个have no support in IE 9
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
渐变但应该在IE 10+中工作。另一方面,Border-image只能从IE 11起向上工作。
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image">Some Test Content</div>
确保我只是上传。我首先必须在这个愚蠢的VM上安装一个绘画应用程序... – Pascal 2015-02-09 11:51:14