html table 圆角,巧用css代码打造圆角table

最新推荐文章于 2023-07-06 16:36:02 发布

李雪飞howhowfire

最新推荐文章于 2023-07-06 16:36:02 发布

阅读量359

点赞数

文章标签： html table 圆角

这篇博客介绍了如何利用CSS来创建具有圆角的表格和div。通过展示具体的CSS代码，作者展示了如何精确控制网页元素的样式，包括设置背景色、宽度以及创建圆角效果。这个小教程对于前端开发者来说是个实用的技巧，有助于提升页面的视觉效果。

摘要由CSDN通过智能技术生成

我们都知道css是一种层叠样式表(英文全称:Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

那么今天就教大家一个小的技巧用css代码打造圆角table，当然也可以制造圆角div。

效果如下图：

CSS打造圆角Table

div.RoundedCorner{background:#9BD1FA;width:260px;}

b.rtop, b.rbottom{display:block;background:#FFF}

b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}

b.r1{margin:0 5px}

b.r2{margin:0 3px}

b.r3{margin:0 2px}

b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height:2px}

单元格1	phpernote.com
单元格3	单元格4

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。不管是学习前端还是后端我们都需要掌握基本的css知识，以上关于css打造圆角table的小教程希望对大家有帮助。

相关推荐：

关注