css奇技淫巧大搜罗

发表于

使元素变灰

1
2
3
4
5
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

如果想使整个网站变灰，只需在 html 上使用上面的样式即可～

页面顶部阴影

这个小trick真是不错～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body:before {
	content: "";
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;

	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	box-shadow: 0px 0px 10px rgba(0,0,0,.8);

	z-index: 100;
}

方法一，使用视口区域减去底部高度：

1
2
3
4
5
6
7
8
9
.content {
    min-height: calc(100vh - 50px);
}

.footer {
    height: 50px;
    width: 100%;
    background-color: pink;
}

1
2
3
4
<div class="content">
    content
</div>
<footer class="footer"></footer>

方法二，全局增加一个负值下边距等于底部高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html, body {
	height: 100%;
	margin: 0;
}
.wrapper {
	min-height: 100%;

	/* Equal to height of footer */
	/* But also accounting for potential margin-bottom of last child */
	margin-bottom: -50px;
}
.footer,
.push {
	height: 50px;
}
.footer {
	width: 100%;
    background-color: pink;
}

1
2
3
4
5
<div class="wrapper">
  content
	<div class="push"></div>
</div>
<footer class="footer"></footer>

这两种用的最多

css粘住底部

css 分割线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="line_03">
	<b></b>
	<span>小小分隔线 inline-block实现</span>
	<b></b>
</div>

.line_03{
    width: 600px;
}
.line_03 b{
	background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    vertical-align: middle;
}
.line_03 span{
	display: inline-block;
    width: 220px;
    vertical-align: middle;
    text-align: center;
}