為4個邊框中的每個邊框創建邊框漸變

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 *梯度發生器

---

注意

---

• 不適合<=IE9項目

Answer 2

您也可以使用多個線性漸變作為背景，並根據需要定位它們，如下面的代碼段所示。

要更改邊框的大小/寬度，請修改background-size的20px值。 （注意：根據所需的輸出，您可能還需要在更改大小時更改線性漸變百分比。但這應該是相當簡單的。）

background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;

總體而言，梯度在IE 9中沒有支持，但應該在IE 10+中工作。 另一方面， 邊界圖像僅從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>