运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html>
2
<head>
3
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4
<title>纯CSS3圆角渐变表格</title>
5
<style type="text/css">    
6
body{margin: 0;padding: 0;background: white url(//ku.shouce.ren/files/images/201601/56a0dc344edc2.jpg);}
7
#main{width: 960px;margin: 160px auto 0 auto;background: white;-moz-border-radius: 8px;-webkit-border-radius: 8px;padding: 30px;border: 1px solid #adaa9f;-moz-box-shadow: 0 2px 2px #9c9c9c;-webkit-box-shadow: 0 2px 2px #9c9c9c;}
8
.features-table{width: 100%;margin: 0 auto;border-collapse: separate;border-spacing: 0;text-shadow: 0 1px 0 #fff;color: #2a2a2a;background: #fafafa;background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff);/* Firefox 3.6*/background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));font-family: Verdana,Arial,Helvetica}
9
.features-table td{height: 50px;line-height: 50px;padding: 0 20px;border-bottom: 1px solid #cdcdcd;box-shadow: 0 1px 0 white;-moz-box-shadow: 0 1px 0 white;-webkit-box-shadow: 0 1px 0 white;white-space: nowrap;}
10
.no-border td{border-bottom: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}
11
.col-cell{text-align: center;width: 150px;font: normal 1em Verdana, Arial, Helvetica;}
12
.col-cell1, .col-cell2{background: #efefef;background: rgba(144,144,144,0.15);border-right: 1px solid white;}
13
.col-cell3{background: #e7f3d4;background: rgba(184,243,85,0.3);}
14
.col-cellh{font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;border-top: 1px solid #eaeaea !important;}
15
.col-cellf{font: bold 1.4em Georgia;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom: 1px solid #dadada !important;}
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
CSS3圆角+投影效果带背景色的表格
分类
表格图层
描述
又一个CSS3表格效果,同样精彩,在网页背景的映衬下,显得非常漂亮和专业,用来显示基于表格的内容肯定很不错。本款表格的边框是外阴影效果,另外将表格的角修饰成了圆角,表格内的单元格还有不同的颜色,似乎这些用CSS3来实现是很简单的...
收藏