博客列表 >表格边角变圆实例-2019年9月6日20时

表格边角变圆实例-2019年9月6日20时

huomou的博客
huomou的博客原创
2019年09月09日 19:09:31683浏览

表格边角变圆实例:

0000.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格实例</title>
<style>

body {
     margin:0;
	 padding:0;
}
.table {
     width:100%;
     margin:10px auto;
     height:auto;
     position:relative;
}
.table table {
     width:90%;
     margin:0 auto;
     border-collapse:collapse;
     font-size:12px;
	 border-radius:10px;
	 overflow:hidden;
	 box-shadow: 0px 0px 5px #ccc; 
}
.table table td {
     height:28px;
     line-height:28px;
     text-align:left;
}
.table th.top{
     font-weight:normal;
     text-align:center;
     letter-spacing:7px;
     color:#000;
     font-size:14px;
     height:32px;
     line-height:32px;
     background-color:#f0f0f0;
     border:1px #dedede solid;
     border-bottom:none;
}
.table .ntitle {
     margin-bottom:10px;
}
.table .ntitle td {
     text-align:left;
     height:28px;
     color:#000;
     line-height:28px;
     border:1px #dedede solid;
     background-color:#fff;
     text-indent:24px;
}	
.table .ntitle td span{
     color:#000065;
}
</style>
</head>
<body>
<div class="table">
<table width="100%" class="ntitle ke-zeroborder" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th colspan="3" class="top">PHP基地</th>
</tr>
<tr>
<td width="50%"><strong>名称</strong></td>
<td width="30%"><strong>简介</strong></td>
<td width="20%"><strong>网址</strong></td>
</tr>
 <tr>
<td>PHP中文网</td>
<td>各种PHP专业知识学习等</td>
<td>www.php.cn</td>
</tr>
 <tr>
<td>PhpStudy</td>
<td>环境搭建</td>
<td>www.xp.cn</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:控制表格边角变圆只要在table的CSS中加入以下代码即可:

	 border-radius:10px;
	 overflow:hidden;

border-radius数字越大,四周圆的弧度就越大,但是表格四周圆是圆了,但是边角消失的问题百度了很久,还是解决不了,请老师指导。


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议