表格样式之合并单元格边框:
方法一:
table设置为border-collapse: collapse;效果不好,有的边框粗,有的边框细。
<table class="table1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
.table1 {
border: 1px solid gray;
border-spacing: 0; /* 单元格之间外边距 */
width: 500px;
border-collapse: collapse; /* 两个边框合并为一个边框,值为collapse会忽略border-spacing属性 */
}
.table1 td {
padding: 10px;
border: 1px solid gray;
}
方法二:
用背景色差实现边线效果 ,效果好
<table class="table2">
<tr>
<td class="table_td">aaaa aaaaa aaaaaaaaa aaaaaaaaa aaaaa</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
颜色渐变
线性渐变:
<div class="box1"></div>
.box1 {
width: 300px;
height: 100px;
/* 参数1:(1)to top 从下到上的渐变 (2)角度*/
/* 第二个参数:第一个代表颜色 第二个代表颜色所占宽度,可用px和% */
/* background: linear-gradient(to left top,red,blue,green,gray);*/
background: linear-gradient(45deg,red 100px,blue 20%,green);
}
径向渐变:
<div class="box2"></div>
.box2 {
width: 300px;
height: 300px;
/* background: radial-gradient(circle 200px,red 20%,blue,green); */
background: radial-gradient(ellipse 100px 50px at 50px 50px,red,blue);
/* ellipse 是形状 ,circle是圆,ellipse是椭圆
100px 50px 是x,y的半径
circle半径只写一个 */
/* at 50px 50px代表开始渐变的x,y位置 */
}
圆锥渐变:
<div class="box3"></div>
.box3 {
width: 300px;
height: 300px;
/* at 50px 50px代表开始渐变的x,y位置 */
/* red 0deg 45deg 红色从0度开始 到45度结束 */
/* background: conic-gradient(at 100px 100px,red,blue,green,pink); */
background: conic-gradient(at 100px 100px,red 0deg 45deg,blue 45deg 90deg,green 90deg 180deg,pink 180deg 360deg);
}
重复渐变:
<div class="box3"></div>
.box4 {
width: 300px;
height: 100px;
/* 线性重复渐变 */
/* background: repeating-linear-gradient(45deg,#000 0 10px,green 10px 20px,red 20px 40px); */
/* #000 0 10px代表开始和结束位置*/
/* 径向重复渐变 */
background: repeating-radial-gradient(circle 50px at 50%,red 0% 10%,green 10% 10%,yellow 20% 30%);
}
计数器
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>js</dd>
</dl>
<dl>
<dt>后端</dt>
<dd>java</dd>
<dd>node js</dd>
<dd>php</dd>
</dl>
/* 1.创建计数器
*/
body {
counter-reset: dl;/*自定义名称 创建计数器可以计算使用该计数器后代元素的数量*/
}
dl {
counter-reset: dd;/*创建dd计数器 每一个dl都是从1开始计算*/
/* 使用计数器 计算dl数量(遇到一个dl元素,就在计数器加1) */
counter-increment: dl;
}
dt::before{
/* counter()函数 */
content: counter(dl) "-";
}
dd::before{
counter-increment: dd;/*哪个元素调用计数器 就是计算该元素*/
content: counter(dl) "." counter(dd) ":";/*把dl计数器和dd计数器结果拼接*/
}