爲每個邊框創建邊框漸變

Question

我想爲每個邊框創建相同的線性漸變。

有5種顏色的邊框漸變從

transparent to white to black to white to transparent 

開始這樣，我有透明的角落。

我該如何爲所有4個邊框做這個？

是否可以將線性漸變分配給邊界？

旁註：應該在IE9 +沒有太多精力跑別的IE10 +：P

Answer 1

如何使用徑向漸變？雖然這只是一個模擬，但您可以看到基本效果。

.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>

---

資源

---

• 1 * gradient generator

如在下面需要像

---

注意

---

• 不適合項目<=IE9

Answer 2

你也可以使用多個線性漸變作爲背景做到這一點，並將其定位片段。

要更改邊框的大小/寬度，請修改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>