1.把彩色的图片变成黑白的图片
img.desaturate{
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
}
2.导航上应用/取消边框:not()
//先给导航添加边框
.nav li{
border-right: 1px solid #666;
}
//然后再去掉最后一个
.nav li:last-child{
border-right: none;
}
//------------------------------
//可以直接使用:not()伪类来应用元素
.nav li:not(:last-child){
border-right:1px solid #666;
}
//-------------------------------
//如果新元素有兄弟元素，也可以直接使用通用的兄弟选择符(~)
..nav li:first-child ~ li{
border-left: 1px solid #666;
}
3.页面顶部添加阴影(CSS3)
body:before{
content: "";
position:fixed;
top: -10px;
left:0;
width:100%;height:10px;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,.8);
-mos-box-shadow:0px 0px 10px rgba(0,0,0,.8);
box-shadow:0px 0px 10px rgba(0,0,0,.8);
}
4.body添加行高
//不需要分别添加line-height到每个p,h标签
body{
line-height:1;
}//文本元素从body继承
5.将所有元素垂直居中
html,body{
height:100%;margin:0;
}
body{
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
display:-webkit-flex;
display:flex;
}
6.逗号分隔列表
//让HTML列表项看上去像一个真正的，用逗号分隔的列表
ul > li:not(:last-child)::after{
content:",";
}//对最后一个列表项使用:not()伪类
7.使用负的nth-child选择项目
//使用负的nth-child选择项目1到项目n
li{display:none;}
li:nth-child(-n+3){display:block;}//选择项目1至3并显示它们
8.使用SVG图标
.logo{background:url("logo.svg");}
//SVG对所有的分辨率类型都具有良好的扩展性，可以避开.png、jpg或.gif文件了
9.优化显示文本
html{
-mos-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;//IE不支持text-rendering
}
10.模糊文本
.blur{
color:transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
11.禁用鼠标点击事件
//CSS3新增的pointer-events禁用元素的鼠标事件
.disabled{pointer-events:none;}
12.CSS3中使用calc()
//calc()用法类似于函数，给元素设置动态值
.simpleBlock{width:calc(100%-100px);}
.complexBlock{
width:calc(100% - 50%/3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
13.文本渐变
h2[data-text]{position:relative;}
h2[data-text]::after{
content:attr(data-text);
z-index:10;
color:#e3e3e3;
position:absolute;top:0;left:0;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
14.三角形(利用border来写三角形)
//向上
div.arrow-up{
width:0px;height:0px;
border-left:5px solid transparent;/*向左倾斜*/
border-right:5px solid transparent;/*向右倾斜*/
border-bottom:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
//向下
div.arrow-down{
width:0px;height:0px;
border-left:5px solid transparent;/*向左倾斜*/
border-right:5px solid transparent;/*向右倾斜*/
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
//向左
div.arrow-left{
width:0px;height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-right:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
//向右
div.arrow-right{
width:0px;height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-left:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
