CSS3圓角表格效果

admin發表於2018-01-03
CSSS3
表格是常用的元素之一，用來組織資料是一種良好的選擇，預設表格是四四方方的不夠圓潤，下面介紹一下使用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()線性漸變一章節。

相關文章