1、伸展一个元素到窗口高度
在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:
html,
body {
height: 100%
;
}
然后将100%应用到任何元素的高：
div {
height: 100%
;
}
2、只在一边或两边显示盒子阴影
如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：
.box-
shadow {
background-
color: #FF8020;
width: 160px;
height: 90px;
margin-top: -
45px;
margin-left: -
80px;
position: absolute;
top: 50%
;
left: 50%
;
}
.box-
shadow:after {
content: "";
width: 150px;
height: 1px;
margin-
top: 88px;
margin-left: -
75px;
display: block;
position: absolute;
left: 50%
;
z-index: -
1;
-webkit-box-shadow: 0px 0px 8px 2px #
000000;
-moz-box-shadow: 0px 0px 8px 2px #
000000;
box-shadow: 0px 0px 8px 2px #
000000;
}
3、制造模糊文本
想要让文本模糊？可以使用color透明和text-shadow实现。
.blurry-
text {
color: transparent;
text-shadow:
0 0 5px rgba(
0,
0,
0,
0.5);
}
3、新版清除浮动（2011）
.clearfix:before, .container:after { content:
""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
4、通用媒体查询
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-
width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-
width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-
width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-
width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-
width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-
width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-
width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-
width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:
1.5), only screen and (min-device-pixel-ratio:
1.5) {
/* Styles */
}
5、强制出现垂直滚动条
html { height:
101% }
6、CSS3 斑马线
tbody tr:nth-
child(odd) {
background-
color: #ccc;
}
原文链接：https://segmentfault.com/a/1190000002773955
转载于:https://www.cnblogs.com/hjsblogs/p/6362386.html
