26个常用易忘CSS小技巧

2020-05-16 07:12:15易采站长站整理

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 {