html5的table及td单元格的圆形边框

上河雨滴

已于 2023-07-25 12:53:47 修改

阅读量1.9k

点赞数

文章标签： css html

于 2021-10-27 21:05:26 首次发布

本文链接：https://blog.csdn.net/qq_54039576/article/details/121001945

版权

若想运用在table的边框，可直接在table的css样式中写入，

例如：

<style>
		table {
			border-radius: 10px 10px 10px 10px;
			/*圆形边框*/
		}
</style>

若是table中的td单元格，可以这样写，

例如


<style>
		table td{
            border-radius:10px 10px 10px 10px ;/*圆形边框*/
        }
</style>

下面是我作业实际的实际效果代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        table{
            width: 1000px;
            border-collapse: separate;
            border-spacing: 10px;
        }
        table td{
            border-radius:10px 10px 10px 10px ;/*圆形边框，上，右 ，下，左*/
            background-color: #ff9;
            border: 1px dashed #006;
            
        }
        img{
            padding: 8px 10px 10px 100px;
            width: 200px;
            height: 130px;
        }
    </style>
    <body>
        <table >
            <tr>
                <td><img src="code1/2/1.jpg"/></td>
                <td><img src="code1/2/2.jpg"/></td>
                <td><img src="code1/2/4.jpg"/></td>
            </tr>
            <tr>
                <td><img src="code1/2/5.jpg"/></td>
                <td><img src="code1/2/6.jpg"/></td>
                <td><img src="code1/2/7.jpg"/></td>
            </tr>
            <tr>
                <td><img src="code1/2/8.jpg"/></td>
                <td><img src="code1/2/9.jpg"/></td>
                <td><img src="code1/2/10.jpg"/></td>
            </tr>
            <tr>
                <td><img src="code1/2/11.jpg"/></td>
                <td><img src="code1/2/12.jpg"/></td>
                <td><img src="code1/2/u=1832127004,2310975935&fm=21&gp=0.jpg"/></td>
            </tr>
        </table>
    </body>
</html>

上河雨滴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5的table及td单元格的圆形边框

若想运用在table的边框，可直接在table的css样式中写入，例如：table{ border-radius:10px 10px 10px 10px ;/*圆形边框*/ }若是table中的td单元格，可以这样写，例如table td{ border-radius:10px 10px 10px 10px ;/*圆形边框*/ }下面是我作业实际的实际效果代码<!DOCTYPE html>...
复制链接

扫一扫