- 黑白图像
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
- 使用:not()在菜单上应用/取消应用边框 如果不使用:not()我们需要先给每一个菜单项添加边框,然后再除去最后一1元素:
.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;
}
- 页面顶部阴影
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;
}
4.给body添加行高 不需要分别添加line-height到每个p、h标记,只要添加到body即可,这样文本元素就可以从body继承。
body {
line-height: 1;
}
5.所有一切都垂直居中
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
注意:在IE11中要小心flexbox。
6.对图标使用 SVG SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
.logo {
background: url("logo.svg");
}
7.优化显示文本 有时字体并不能在所有设备上都达到最佳的显示,可以让设备浏览器来帮助你:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
注意:IE /Edge没有 text-rendering 支持。
8.使用max-height和溢出隐藏来实现只有CSS的滑块
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}
9.继承box-sizing
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
10.表格单元格等宽
.table {
table-layout: fixed;
}
11.用Flexbox摆脱外边距的各种hack 当需要用到列分隔符时,通过flexbox的space-between 属性,就可以摆脱nth-,first-,和 last-child的hack了
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
12.CSS写出三角形
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
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; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
div.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
13.CSS3 calc()的使用 calc() 用法类似于函数,能够给元素设置动态的值,并且可以计算不同单位的差值
.simpleBlock {
width: calc(100% - 100px);
}
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
14.文本渐变
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)));
}
15.禁用鼠标事件
.disabled { pointer-events: none; }
16.模糊文本
.blur {
color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
17.隐藏页面元素
- display-none: 元素不存在,从 dom 中删除
- opacity-0: 元素透明度将为 0,但元素仍然存在,绑定的事件仍旧有效仍可触发执行。
- visibility-hidden:元素隐藏,但元素仍旧存在,页面中无法触发该元素的事件。
18.修改滚动条样式
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.25);
transition: color 0.2s ease;
}
19.文本超出显示省略号
- 单行文本:
.text {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
- 多行文本:
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}