css斜线实现方法
这里呢博主在网站找了很多资料,实现方法基本上都是用JS实现的,那种办法基本上是行不通的,因为斜线是实现了,里面内容却没办法输入。这里呢博主就不打算介绍这种办法了。
css斜线实现方法如下:
1、可以用CSS3属性transform实现;
代码如下:
<!doctype html> <html> <head> <title>css斜线实现方法-琅枫博客</title> </head> <style> #td1{ border-bottom:1px solid #000000; -webkit-transform: rotate(15deg);/*Safari 4+,Google Chrome 1+ */ -moz-transform: rotate(15deg);/*Firefox 3.5+*/ transform:rotate(15deg); filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.15); position: relative; top: -11px; } </style> <body leftmargin="20" topmargin="20"> <table border="0" bgcolor="000000" cellspacing="1" width="400"> <tbody> <tr bgcolor="FFFFFF"> <td id="td1"></td> <td>张三</td> <td>李四</td> <td>王五</td> </tr> <tr bgcolor="FFFFFF"> <td>数学</td> <td>55</td> <td>66</td> <td>77</td> </tr> <tr bgcolor="FFFFFF"> <td>英语</td> <td>99</td> <td>68</td> <td>71</td> </tr> <tr bgcolor="FFFFFF"> <td>语文</td> <td>33</td> <td>44</td> <td>55</td> </tr> </tbody> </table> </body> </html>
效果图如下:
2、其实是可以用背景图的形式来实现,需要一张有斜线的背景图。
代码如下:
<!doctype html> <html> <head> <title>css斜线实现方法-琅枫博客</title> </head> <style> #td1{ background:url(xx.jpg) no-repeat; background-size:100% 100%; } </style> <body leftmargin="20" topmargin="20"> <table border="0" bgcolor="000000" cellspacing="1" width="400"> <tbody> <tr bgcolor="FFFFFF"> <td id="td1"></td> <td>张三</td> <td>李四</td> <td>王五</td> </tr> <tr bgcolor="FFFFFF"> <td>数学</td> <td>55</td> <td>66</td> <td>77</td> </tr> <tr bgcolor="FFFFFF"> <td>英语</td> <td>99</td> <td>68</td> <td>71</td> </tr> <tr bgcolor="FFFFFF"> <td>语文</td> <td>33</td> <td>44</td> <td>55</td> </tr> </tbody> </table> </body> </html>
效果图如下:
由于博主对PS不熟悉,就随便找了张图,方向不一样,不管不影响结果哈!
本文出自:琅枫个人博客。如需转载请注明出处!
本文出处:"https://www.phpfeng.cn/learn/web/132.html"
如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~
微信打赏

支付宝打赏
