表與漸變邊框和單元格漸變邊框

Question

我想在邊框和div邊界上實現一個漸變的表格，因為它們是一個完整的項目，我的意思是單元格的邊框顏色應該是不同的。

這就是我到目前為止所得到的：

 table tr:first-child td { border-top: 0; } table tr:last-child td { border-bottom: 0; } table tr td:last-child { border-right: 0; border-left: 0; } table tr td:first-child { border-left: 0; } td { border-right: 2px solid #bebebe; border-bottom: 2px solid #bebebe; } td { border-collapse: collapse; } table { /*border-collapse: collapse;*/ border-style: solid; border-width: 20px 20px; border-image-source: linear-gradient(to bottom, #eee 0%, #bebebe 100%); border-image-slice: 20; border-image-repeat: stretch; box-shadow: 0px 10px 10px black; } body { background-color: #eee; } 

 <table class="tablagradiente" align="center" width="41%"> <tr> <td> <p>Sesiones Ordinarias</p> </td> <td> <p>Sesiones Extraordinarias</p> </td> </tr> <tr> <td> <p>&nbsp;</p> </td> <td> <p>Primera Sesión Extraordinaria 2015</p> </td> </tr> </table> 

Answer 1

解

通過設置以下內容，您實際上可以在沒有border-image屬性的情況下實現您想要的效果：

table {
  background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */
  background-origin: border-box; /* set background to start from border-box */
  border-spacing: 5px; /* space between each cell */
  border: 5px solid transparent; /* optional */
}

瀏覽器支持：

• Background Image屬性還具有比Border Image更好的瀏覽器支持。

---

說明

實質上我們在這里做的是以下內容：

• 添加linear-gradient作為表格的background 。
• 設置背景的原點，使其從表格的border-box開始。 （有關background-origin更多詳情，請參閱我的答案 ）。
• 分隔表格單元格和行之間的邊界（ 默認設置），以便通過其間的空間可以看到table的background 。
• 為表本身添加額外的透明border 。 這是可選的，僅需要，因為圖像中的表格邊框看起來比單元格之間的邊框更粗。

 table { background-image: linear-gradient(to bottom, red 0%, blue 100%); /* the gradient */ background-origin: border-box; /* set background to start from border-box */ border-spacing: 5px; /* space between each cell */ border: 5px solid transparent; /* optional */ } body { background-color: #eee; } /* Just for demo */ table { width: 500px; } td { background: white; /* if not set cell would also be transparent and show the gradient */ } 

 <!-- prefix free lib for older browsers --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <table class="tablagradiente" align="center" width="41%"> <tr> <td><p>Sesiones Ordinarias</p></td> <td><p>Sesiones Extraordinarias</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> <tr> <td><p>&nbsp;</p></td> <td><p>Primera Sesión Extraordinaria 2015</p></td> </tr> </table> 

^{注意：我在答案中使用了紅色到藍色漸變，使效果更明顯。}