CSS3那些常用的效果

标签：

三角形：
.topArrow{
　　　　　　border-top:15px solid red;//边框的颜色就是背景色，箭头的方向取相反
　　　　　　border-left:15px solid transparent;//其他的边框设置空白，不设置高度宽度
　　　　　　border-right:15px solid transparent;
　　　　　　width:0;height:0;font-size: 0; line-height: 0;
}

内容箭头（用伪类来实现）
/* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */
.tip:before { //div名称
　　　　　　　　position: absolute;
　　　　　　　　display: inline-block;
　　　　　　　　border-top: 7px solid transparent;
　　　　　　　　border-left: 7px solid #eee; //箭头放的方向
　　　　　　　　border-bottom: 7px solid transparent;
　　　　　　　　border-left-color: rgba(0, 0, 0, 0.2); //设置透明度0-1直接
　　　　　　　　right: -8px;
　　　　　　　　top: 20px;
　　　　　　　　content: ‘‘;
}

/* 背景阴影*/
.tip:after {
　　　　　　position: absolute;
　　　　　　display: inline-block;
　　　　　　border-top: 6px solid transparent;
　　　　　　border-left: 6px solid #eee;
　　　　　　border-bottom: 6px solid transparent;
　　　　　　right: -6px; //偏移像素
　　　　　　top: 21px;
　　　　　　content: ‘‘;
}

css3美化table
//.bordered table的class
.bordered {font-family: ‘trebuchet MS‘, ‘Lucida sans‘, Arial;color: #444;}
.bordered th {-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;/*表格阴影效果*/
text-shadow: 0 1px 0 rgba(255,255,255,.5);/*文字阴影效果*/background-color: #dce9f9;/*gradient制作表头渐变色*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
}
.bordered th:first-child {-moz-border-radius: 6px 0 0 0;-webkit-border-radius: 6px 0 0 0;border-radius: 6px 0 0 0;}
.bordered th:last-child {-moz-border-radius: 0 6px 0 0;-webkit-border-radius: 0 6px 0 0;border-radius: 0 6px 0 0;}
.bordered tr:last-child td:first-child {-moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;border-radius: 0 0 0 6px;}
.bordered tr:last-child td:last-child {-moz-border-radius: 0 0 6px 0;-webkit-border-radius: 0 0 6px 0;border-radius: 0 0 6px 0;}

CSS3那些常用的效果

标签：

原文地址：http://www.cnblogs.com/houzhao/p/5579788.html