CSS技巧积累

积累的一些css技巧

1.彩色图片显示为黑白图片。filter属性

img{
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
}
/*参考filter属性*/

2. :not()选择器

.nav li:not(:last-child){
	border-right: 1px solid #666;
}
/*熟练使用css选择器*/

3. 页面顶部阴影

body:before{
	content:"";
	position: fixed;
	left:0;
	width:100%;
	top:-10px;
	height: 10px;
	box-shadow: 0px 0px 10px red;
	z-index: 100;
}

4. 统一所有p,h元素的行高

body{
	line-height: 1;/*给定值也行，文本元素会从body继承*/
}

5. 逗号分隔列表

ul li:not(:last-child)::after{
	content: ","
}

6. 使用max-height和overflow实现css滑块

.slider div{
	height: 400px;
	max-height: 0;/*max-xxx优先级高于xxx*/
	overflow: hidden;
	background-color: red;
	transition: .6s ease;/*动画效果建议写在开始，不建议写在结束（比如hover）上，自己体会下效果*/
}
.slider:hover div{
	max-height: 400px;
}

7. 使用属性选择器用于空链接

a[href^="http"]:empty::before{
	content: attr(href);
}

8. 渐变文字： 方法有很多种，可以自行百度。这里记录自己最早接触的一种

.gradient-text{
	background-image: -webkit-linear-gradient(bottom,red,blue,yellow);/*背景渐变*/
	-webkit-background-clip:text;/*剔除文字外的背景*/
	-webkit-text-fill-color:transparent;/*文字填充透明色*/
}

9. css禁用鼠标事件

.disabled{
	pointer-events: none;
}

10. 模糊文本

.blur{
	color:transparent;
	text-shadow: 0 0 2px red;
}

11. 显示连接地址

a::after{
	content: "("attr(href)")";/*新发现：居然还可以这样拼接文本~~~*/
}

12. 禁止用户选中文本

.user{
	user-select: none;
}

13. 增强用户体验，使用伪元素实现增大点击热区

.btn::after{
	content: "";
	position: absolute;
	top:-10px;
	right:-10px;
	bottom: -10px;
	left:-10px;
}

14. 图片自适应宽度

img{
	max-width: 100%;/*较大图片适应小容器的宽度*/
}

15. 简单实现3D按钮：左上边框浅色，右下边框深色即可

button{
	background: #888;
	border:5px solid;
	border-color:#999 #777 #777 #999;
}

16. csss实现三角形

div{
	width: 0;
	height: 0;/*有宽高的话，会变成梯形*/
	border: 20px solid transparent;
	border-top-color:red;
}

17. 内部阴影

div{
	box-shadow: inset 0 0 10px red;
}

18.一行文字两端对齐

div{
	text-align:center;/*文字两端对齐，但对最后一行无效，所有用伪元素hack一下，模拟最后一行*/
    height:20px;/*伪元素会增加额外的高度，所以div最好指定高度*/
    background-color:red;
}
div::after{/*模拟最后一行*/
    content:"";
    display:inline-block;
    width:100%;
}

19.单行省略

.one-line{
	width:200px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

20.多行省略

.dhsl{
	width:300px;/*宽度是必须的*/
    height:200px;/*高度不是必须的，可以用-webkit-line-clamp撑开*/
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;/*显示的行数*/
}