html边框圆角化可以用css中的“border-radius”属性来实现。
1、新建html文档,在body标签中添加一个div标签,然后为这个div标签设置边框,这时默认情况下边框是直角:
2、为div标签设置“border-radius”属性,属性值为圆角半径大小,这时边框的四个顶角都会变成圆角:
3、为div标签设置“border-radius”属性,属性值分别对应边框的左上角、右上角、右下角和左下角,这时可以对每个顶角自定义设置圆角半径:
你好,关于html中标签的一些样式属性,其实在设置后会自动的生成css样式,所以我们打开控制台可以看见,虽然tr中你设置了borddercolor,但是在控制台中查看tr的样式可以看见如下图所示:
tr在控制台中的查看样式
也就是说,tr的样式是继承(inherit)其父标签的,也就是table的,table是什么颜色,那它就是什么颜色,解决的方法就是使用css样式,可以外部,也可以内联,这里使用内联样式演示一下:
采用内联样式解决
代码如下(就是使用了内联样式而已):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置行的边框颜色</title>
</head>
<body>
<table width="500" border="1" bordercolor="blue">
<caption>某公司员工工资</caption>
<tr>
<th>姓名</th>
<th>基本工资</th>
<th>岗位工资</th>
<th>绩效工资</th>
<th>工龄工资</th>
</tr>
<tr style="border-color: red">
<td>李1</td>
<td>1000</td>
<td>600</td>
<td>800</td>
<td>400</td>
</tr>
<tr>
<td>王2</td>
<td>800</td>
<td>600</td>
<td>800</td>
<td>200</td>
</tr>
</table>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)