CSS3圆角表格效果

2018-1-3 15:18| 作者: admin| 查看: 1346| 评论: 0|来自: 蚂蚁部落

表格是常用的元素之一,用来组织数据是一种良好的选择,默认表格是四四方方的不够圆润,下面介绍一下使用CSS3让表格的的四角变的圆润起来,并且实现立体感效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"/>  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body{
  margin:0;
  padding:0;
  font:12px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
  color:#555;
  background:#f5f5f5;
}
a{color:#666;}
#content{
  width:65%;
  max-width:690px;
  margin:6% auto 0;
}
table{
  overflow:hidden;
  border:1px solid #d3d3d3;
  background:#fefefe;
  width:70%;
  margin:5% auto 0;
  border-radius:5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td{
  padding:18px 28px 18px;
  text-align:center;
}
th{
  padding-top:22px;
  text-shadow: 1px 1px 1px #fff;
  background:#e8eaeb;
}
td{
  border-top:1px solid #e0e0e0;
  border-right:1px solid #e0e0e0;
}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first{text-align:left}
td.last{border-right:none;}
td{
  background:linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
}
tr.odd-row td{
  background:linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
}
th{
  background:linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
}
tr:first-child th.first{
  border-top-left-radius:5px;
}
tr:first-child th.last {
  border-top-right-radius:5px;
}
tr:last-child td.first{
  border-bottom-left-radius:5px;
}
tr:last-child td.last{
  border-bottom-right-radius:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $("table tr:nth-child(odd)").addClass("odd-row");
  $("table td:first-child, table th:first-child").addClass("first");
  $("table td:last-child, table th:last-child").addClass("last");
});
</script>
</head>
<body>
<div id="content">
  <table cellspacing="0">
    <tr>
      <th>任务细节</th>
      <th>处理进程</th>
      <th>虚假任务</th>
    </tr>
    <tr>
      <td>看一看<a href="/">简单设计</a></td>
      <td>100%</td>
      <td>No</td>
    </tr>
    <tr>
      <td>带阴影的CSS3表格</td>
      <td>100%</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>表格边框圆角</td>
      <td>50%</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Take a stretch break</td>
      <td>0%</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>在你的网页中加入本效果</td>
      <td>100%</td>
      <td>Yes</td>
    </tr>
  </table>
</div>
</body>
</html>

上面代码实现了圆角表格效果,更多内容参阅相关阅读。

相关阅读:

(1).border-radius参阅CSS3 border-radius一章节。

(2).box-shadow参阅CSS3 box-shadow一章节。

(3).线性渐变参阅CSS3 linear-gradient()线性渐变一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部