表格背景颜色渐变代码
本帖最后由 II.〆石Zi° 于 2018-10-14 18:38 编辑 <br /><br /><style type="text/css">.a_t{display:none!important}
.a_mu{display:none!important}
.scbar_icon_td{display:none!important}
.scbar_txt_td{display:none!important}
.scbar_type_td{display:none!important}
.scbar_btn_td{display:none!important}
.scbar_hot_td{display:none!important}
.pgs{display:none!important}
.tshare{display:none!important}
.a_pt, .a_pb{display:none!important}
.fullvfastpost{display:none!important}
.sign{display:none!important}
</style>
<p><strong><font color="darkred" size="4">线性渐变：</font><br></strong></p><p>
写法一：background: linear-gradient(gold,black) 【表示颜色从上往下，从金色到黑色转换，各占50% （默认）】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: linear-gradient(gold, black); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p>
</td>
</tr>
</tbody></table>
<p></p></div>
<p>代码:</p><p><div class="blockcode"><blockquote><table width="200" class="t_table" style="background: linear-gradient(gold, black); width: 200px;"><br><tbody><br><tr><br><td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><br></td><br></tr><br></tbody></table></blockquote></div><br><p></p><p><br></p>
<p>写法二：linear-gradient(to right,gold,green) 【表示颜色的渐变方向（也是九宫格）】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: linear-gradient(to right, gold, green); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p></td>
</tr>
</tbody></table>
<p></p></div>
<p>写法三：background:liner-gradient(45deg,gold,black)【表示中中间的水平线顺时针旋转10度开始渐变】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: linear-gradient(45deg, gold, black); width: 200px;">
<tbody>
<tr>
<td> <p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p> </td>
</tr>
</tbody></table>
<p></p></div>
<p>写法四：background：linear-gradient(gold 20%,black 30%,pink)【表示颜色渐变所占的百分比】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: linear-gradient(gold 20%, black 30%, pink); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p></td>
</tr>
</tbody></table>
<p></p></div>
<p>写法五:复合写法background:linear-gradient(to top right,gold 20%,black 30%,pink)【表示颜色从右下角往左上角，从红色开始渐变到20%,在由绿色从20%渐变到30%,剩下的都是粉红色】</p>
<p> <strong> 颜色渐变方向有</strong>:to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: linear-gradient(to right top, gold 20%, black 30%, pink); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p></td>
</tr>
</tbody></table>
<p></p></div>
<p><strong><br></strong></p><p><font color="darkred"><font size="4"><strong>放射性渐变</strong>：</font></font></p><p>【默认以椭圆为中心向四周扩散】<br></p>
<p> 写法一：background:radial-gradient(gold,black)【写法与线性渐变相似】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: radial-gradient(gold, black); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p></td>
</tr>
</tbody></table>
<p></p></div>
<p>写法二：radial-gradient( circle 50px at center center,gold,black) 【 改变放射源的形状为圆，圆心坐标在中心center center,半径为50px(可不写)】</p>
<p>例子：</p>
<p><div style="left: 60px; top: 0px; position: relative;">
<table width="200" class="t_table" style="background: radial-gradient(50px at center, gold, black); width: 200px;">
<tbody>
<tr>
<td><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p><p>颜色渐变</p></td>
</tr>
</tbody></table>
<p></p> </div>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=101092&auto=1&height=66"></iframe>
<p><br></p><p><strong><font color="darkred" size="4">（内容转自网络）</font></strong></p> 感谢分享噶，不错的哈以后学习一下…… 感谢分享，非常有用的 看着我就不会，还是不用这个码了。 会者不难，难者不会。 看的不明白 如果能学会应该挺好看的吧 行家看门道 外行看热闹 我是个门外汉 就看看热闹吧{:73_581:} ☆菲比寻常★ 发表于 2018-10-14 20:55
行家看门道 外行看热闹 我是个门外汉 就看看热闹吧
我更不懂~一起看热闹~{:73_582:}
页:
[1]