CSS3设置任意圆角表格

最新推荐文章于 2023-09-02 23:14:26 发布

浪漫鼠

最新推荐文章于 2023-09-02 23:14:26 发布

阅读量1.1w

点赞数 1

分类专栏： CSS

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要属性：border-radius:5px;

任意一角也可以：

border-top-left-radius:5em;
border-top-right-radius:5em;
border-bottom-right-radius:5em;
border-bottom-left-radius:5em;

下面这种写法：“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。

border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;

也可以换成这样写：

border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;

下面这个是例子。

<html>
 <head>
  <style type="text/css">
.table{border-radius: 8px;border:1px solid #F00;}
</style> 
 </head>
 <body> 
  <table class="table"> 
   <tbody>
    <tr> 
     <td> 啊啊啊 </td> 
     <td> 啊啊啊 </td> 
     <td> 啊啊啊 </td> 
    </tr> 
    <tr> 
     <td> 啊啊啊 </td> 
     <td> 啊啊啊 </td> 
     <td> 啊啊啊 </td> 
    </tr> 
   </tbody>
  </table>   
 </body>
</html>

优惠劵

浪漫鼠

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS3设置任意圆角表格

主要属性：border-radius:5px;任意一角也可以：border-top-left-radius:5em;border-top-right-radius:5em;border-bottom-right-radius:5em;border-bottom-left-radius:5em;下面这种写法：“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他
复制链接

扫一扫