html边框圆角化代码

html边框圆角化代码,第1张

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8294486.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存