HTML列表向下2格填充格子,html表格单元格添加斜下框线的方法

一、分隔单元格的方法

1、用“transform: rotate(-55deg);”把一条水平线旋转一定角度就成斜线了

2、利用以下命令调整分割线位置等。

:after

:before

transform: rotate(-55deg);

transform-origin: top;

3、注意：加斜线的单元格的宽高需要时固定值，否则会乱掉。

二、斜下框线效果及对应html代码：

1、效果：

1)未加斜下框线效果：

2)加一根斜下框线效果：

2、html代码：

1)未加斜下框线效果：

2)加斜下框线效果：

table{

border-collapse:collapse;

}

table,tr,td{

border:1px solid black;

}

td{

width:100px;/*长直角边，这里需要自己调整，根据自己的需求调整宽度*/

height:75px;/*短直角边，这里需要自己调整，根据自己的需求调整高度*/

position: relative;

}

td[class=first]:before{

content: "";

position: absolute;

width: 1px;

height:200px;/*斜边，这里需要自己调整，根据td的宽度和高度*/

top:0;

left:0;

background-color: black;

display: block;

transform: rotate(-55deg);/*长/斜对应角度，这里需要自己调整，根据线的位置*/

transform-origin: top;

}

-->

		*/

------------------------------------------------------Tanwheey--------------------------------------------------

爱生活，爱工作。