CSS3那些常用的效果

三角形：

.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;}

转载于:https://www.cnblogs.com/houzhao/p/5579788.html

原文地址：https://blog.csdn.net/weixin_30663471/article/details/98671066?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-12-98671066-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88