三角形：

.triangle{
    　　　　width:0;height:0; 　　　　border:10px solid transparent; 　　　　border-top-color:red; //三角形的方向（相反）、颜色 　　　　//border-left:10px solid red;修改大小以及厚度 } //使用伪类来是实现文字后面的箭头 .triangle{position:relative;} .triangle:after,.triangle:before{
    　　content:''; 　　width:0; 　　height:0; 　　border:10px solid transparent; 　　border-left:10px solid red; 　　position:absolute; 　　left:52px; } //如果想使单线条  after、before  的border-left:10px solid #ccc; 再使用伪类即可 .triangle:before{
    　　border-left-color:red;//需要设置的颜色 　　left:53px; }

 

内容箭头（用伪类来实现）

　　// 箭头 - :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;}