cursor:help; //箭头加问号;
cursor:wait; //转圈圈;
cursor:move; //移动光标;
cursor:crosshair; //十字光标
}
使用硬件加速
.wrap {
transform: translateZ(0);
}
图片宽度自适应
img {max-width: 100%}
Text-transform和Font Variant
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
将一个容器设为透明
.wrap {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
消除transition闪屏
.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
自定义滚动条
overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {
width: 5px;
}滚动条的轨道
::-webkit-scrollbar-track {
background-color: #ffa336;
border-radius: 5px;
}
滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #ffc076;
border-radius: 5px;
}
让 HTML 识别 string 里的 ‘n’ 并换行
body {
white-space: pre-line;
}
实现一个三角形
.wrap {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
移除被点链接的边框
a {outline: none}
a {outline: 0}
使用CSS显示链接之后的URL
a:after{content:" (" attr(href) ") ";}select内容居中显示、下拉内容右对齐
select{
text-align: center;
text-align-last: center;
}
select option {
direction: rtl;
}
修改input输入框中光标的颜色不改变字体的颜色
input{
color: #fff;
caret-color: red;
}
修改input 输入框中 placeholder 默认字体样式
//webkit内核的浏览器
input::-webkit-input-placeholder {
color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {










