一、基础
1、复位
<style type="text/css">
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
</style>
2、重置表单样式
<style type="text/css">
input ,button,textarea,select{
border: none;
outline: none;
appearance:none;
}
</style>
<input type="" placeholder="请输入内容" name="">
<button>按钮</button>
<textarea>我和你</textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
3、计算函数 calc() : 用于动态计算长度值
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
注意，减号、加号运算符首尾必须要有空格
<style type="text/css">
.test {
width: calc(100% - 50px);
background: #eee;
}
</style>
<div class="test">我的宽度为100% - 50px</div>
4、为body设置行高，不必为其他元素设置，文本元素很容易继承body样式
<style type="text/css">
body{
line-height: 2.5;
}
</style>
</head>
<p>为body设置行高</p>
<p>为body设置行高</p>
<p>为body设置行高</p>
<p>为body设置行高</p>
</body>
5、使用svg图标：
svg图标，也可叫字体图标，可以用font-size设置图标的大小，这样的图标一般都是svg格式的，如 阿里iconfont
SVG的好处不懂可以百度一下
.logo {
background: url('logo.svg')
}
6、字体大小根据不同视口进行调整
不用写Javascript了
<style type="text/css">
:root{
font-size: calc(2vw + 1vh);
}
body{
font-size: 1rem;
}
</style>
<p>字体大小根据不同视口进行调整</p>
7、禁止鼠标事件，移动端禁止使用长按保存图片功能
<style type="text/css">
/* PC、移动端都禁止点击事件 */
.no-event{
pointer-events: none;
}
/* 移动端禁止长按呼出菜单 */
.no-callout{
-webkit-touch-callout: none
}
</style>
<div class="no-event" onclick="alert('点击事件')">禁止鼠标事件</div>
<div class="no-callout">移动端禁止长按呼出菜单</div>
8、移动端禁止用户长安文字选择功能
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>css爆炸级操作</title>
<style type="text/css">
.noselect{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
<body>
<div class="noselect">移动端禁止用户长按文字选择功能</div>
</body>
9、文字模糊
<style type="text/css">
.blur{
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
<div class="blur">文字模糊</div>
10、文字渐变
<style type="text/css">
.text-gradient {
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
</style>
<div class="text-gradient">文字渐变</div>
11、变量函数
<style type="text/css">
/* 将变量声明到全局 */
:root {
--theme_color: red
}
/* 使用变量，参数2为当未找到变量--theme_color时所使用的值 */
body {
color: var(--theme_color);
}
.selector{
--c:blue ;
}
.selector span{
color: var(--c);
}
</style>
<div class="selector"><span>变量函数</span></div>
</body>
12、背景变量兼容性写法
<style type="text/css">
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -o-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0)))
}
</style>
<div class="gradient">背景渐变兼容性写法</div>
13、为手持设备定制特殊样式
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">
14、不换行，自动换行，强制换行
<style type="text/css">
p{
width: 100px;
/*不换行*/
white-space: nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制换行*/
word-break: break-all;
}
</style>
<p>自动换行自动换行自动换行自动换行</p>
15、超出n行显示省略号
.hide-text-n {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n;
overflow: hidden
}
----------------------------------------------------
<style type="text/css">
.hide-text-3 {
width: 150px;
height: 65px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background-color: #faf;
}
</style>
<div class="hide-text-3">
超出n行显示省略号
超出n行显示省略号
超出n行显示省略号
超出n行显示省略号
</div>
16、移动端顺畅滑动
.scroll-touch {
-webkit-overflow-scrolling: touch
}
17、多张背景图片
body {
background: url() no-repeat left center / 1rem, url() no-repeat right center / 1rem
}
18、硬件加速
写transition、animation时，请用transform代替left、top等属性，从而使动画更流畅
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0)
}
19、移动端屏幕旋转时，字体大小不改变
<style type="text/css">
html, body, form, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%
}
</style>
20、animation动画结束时，保持该状态不变
.box {
animation: move 1s ease forwards;
/* animation-fill-mode: forwards; */
}
@keyframes move {
0% {
transform: translateY(0)
}
100% {
transform: translateY(200px)
}
}
21、横竖屏匹配
/* 竖屏时样式 */
@media all and (orientation:portrait) {
body::after {
content: '竖屏'
}
}
/* 横屏时样式 */
@media all and (orientation:landscape) {
body::after {
content: '横屏'
}
}
22、改变input光标的颜色
<style type="text/css">
.input{
caret-color:red;
}
</style>
<div class="">
<input class="input"></input>
</div>
23、三角形
<style type="text/css">
.traingle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid salmon;
}
</style>
<div class="traingle"></div>
24、文字裁剪背景
style type="text/css">
.box {
width: 300px;
height: 80px;
font-size: 32px;
background-image: url('u=3623559886,2482601831&fm=27&gp=0.jpg');
background-size: cover;
-webkit-background-clip: text;
color: transparent
}
</style>
<div class="box">文字裁剪背景</div>
25、倒影
图片倒影也ok的，主要是复制节点所显示的内容
<style type="text/css">
.box {
-webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.3))
}
</style>
<div class="box">文字背景倒影</div>
26、动画相同，缓动不同
<style type="text/css">
div{
width: 80px;
height: 80px;
border-radius: 50%;
float: left;
background-color: red;
margin-right: 40px;
}
.ball1 {
animation: move .6s ease-in infinite alternate;
}
.ball2 {
animation: move .5s ease-in infinite alternate;
}
.ball3 {
animation: move .4s ease-in infinite alternate;
}
@keyframes move {
100% {
transform: translateY(30px);
}
}
</style>
<div class="ball1"></div>
<div class="ball2"></div>
<div class="ball3"></div>
27、斜线
<style type="text/css">
.box {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #313131;
overflow: hidden;
}
.box::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 1px;
background-color: #313131;
transform: rotateZ(45deg) scaleX(2);
}
</style>
<div class="box"></div>
28、增亮图片
<style type="text/css">
img:hover{
filter: brightness(1.1);
}
</style>
<img src="u=1100504442,2087106573&fm=27&gp=0.jpg">
29、头像底部阴影
<style type="text/css">
.avatar {
position: relative;
width: 150px;
height: 150px;
background: url('u=1100504442,2087106573&fm=27&gp=0.jpg') no-repeat center center / 100% 100%;
border-radius: 50%;
}
.avatar::after {
content: "";
position: absolute;
top: 10px;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
filter: blur(10px) brightness(80%) opacity(.8);
z-index: -1;
}
</style>
<div class="avatar"></div>
30、加载
<style type="text/css">
.loading {
width: 40px;
height: 40px;
border-width: 2px;
border-style: solid;
border-color: #fff #fff #000 #000;
border-radius: 50%;
animation: loading 1s ease-in-out infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="loading">加载</div>
把border的颜色改成
border-color: #FFF transparent #FFF transparent
二、伪类、伪元素
1、当a标签没有文本内容，但有href属性的时候，显示它的href属性。
<style>
/* href为标签上的property，可以换成任何一个 */
a[href^='http']:empty::after {
content: attr(href)
}
/* 字符串拼接 */
a:empty::after {
content: "("attr(href)")"
}
</style>
<a href="http:www.baidu.com"></a>
2、用户点击反馈的时候
<style>
.btn:active {
opacity: .7;
/* background-color: #f1f1f1 */
}
</style>
<div class="btn">反馈</div>
3、移动端pointer型元素（a,button或者手动cursor:pointer的元素）点击去除高亮
* {
-webkit-tap-highlight-color: transparent
}
4、清楚浮动
.clearfix::after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both
}
5、最后一个边框不需要边框、边距等。
<style>
ul > li:not(:last-child){
border: 1px solid red;
}
</style>
<ul>
<li>一</li>
<li>二</li>
</ul>
6、奇数项、偶数项、倍数分组项
/* 基数 */
.selector:nth-child(2n-1) {}
/* 偶数 */
.selector:nth-child(2n) {}
/* 倍数分组项 */
.selector:nth-child(3n+1) {} /* 匹配第1、4、7、10... */
.selector:nth-child(3n+5) {} /* 匹配第5、8、11、14... */
.selector:nth-child(5n-1) {} /* 匹配第4、9、13、17... */
7、逗号分隔列表
<style>
ul > li:not(:last-child)::after{
content: ','
}
</style>
<ul>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
</ul>
8、表单元素各种状态的设置
<style>
/* Input、textarea设置placeholder文字的颜色（这里的placeholder是个伪元素，并不是伪类） */
.selector::placeholder {
color: #dad;
}
/* 设置表单元素获取焦点时的样式 */
.selector:focus {
border: 1px solid #ebebeb
}
/* 设置表单元素被禁止时的样式 */
.selector:disabled {
background-color: #f1f1f1
}
/* 设置checkbox、radio被选中时的样式 */
.selector:checked {
width: 100px;
height: 100px;
background-color: red;
color: red;
}
</style>
<input class="selector" type="text" checked=""></input>
9、将checkbox改造成switch组件（利用伪类checked状态））
checkbox:checked + ::after伪元素轻松实现
<style>
/* 背景层 */
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
/* 按钮 */
.switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
/* 选中状态时，背景色切换 */
.switch-component:checked {
background-color: #86c0fa;
}
/* 选中状态时，按钮的位置移动 */
.switch-component:checked::after {
left: 50%;
}
</style>
<input class='switch-component' type='checkbox'>
10、美化破碎图片
每个浏览器效果都不一样，可以忽略
<style>
img {
position: relative;
display: block;
width: 100%;
height: auto;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
text-align: center;
line-height: 2
}
/* 提示语 */
img:before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px
}
/* 显示图片url引用 */
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px
}
</style>
<img src="u=4176983082,797743983&fm=26&gp=0.jpg" style="width: 400px;height: 300px;">
11、隐藏没有静音自动播放的视频
video[autoplay]:not([muted]) {
display: none
}
12、首字、首行放大
<style>
/* 首字放大 */
p:first-letter {
font-size: 2rem
}
/* 首行放大 */
p:first-line {
font-size: 2rem
}
</style>
<p>我是魔鬼哦</p>
13、a标签伪类设置顺序 (lvha)
a:link {}
a:visited {}
a:hover {}
a:active {}
14、增强用户体验，使用伪元素实现增大点击热区
.btn {
position: relative
}
.btn::befoer{
content: "";
position: absolute;
top: -1rem;
right: -1rem;
bottom: -1rem;
left: -1rem
}
15、伪元素实现换行，替代换行标签
<style>
.br::after{
content: "A";
white-space: pre
}
</style>
<div class="br"></div>
<div class="br"></div>
<div class="br"></div>
16、夜间模式
此方法是checkbox:checked + ~选择器 + css变量啦，此处的变量为局部变量，非常酷，大家可以自己加一些其他的变量，如文字的颜色
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%
}
/* 省略switch-component的样式 */
.theme-container {
--theme_color: #fff; /* 主题色 */
width: 100%;
height: 100%;
background-color: var(--theme_color);
transition: background-color .2s ease
}
.switch-component:checked + .theme-container {
--theme_color: #313131 /* 重置变量 */
}
</style>
<input class='switch-component' type='checkbox' checked="">
<div class="theme-container"></div>
17、感应用户聚焦区域
foucs-within表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点，上图则是.form-wrapper的候代元素input获得了焦点
.form-wrapper:focus-within {
transition: all .2s ease;
transform: translateY(-1rem);
background-color: #f1f1f1;
}
18、用户获取焦点时，上浮效果
input {
appearance: none;
outline: none;
border: none;
padding: 1rem;
border-bottom: 1px solid #ebebeb;
transition: all .2s ease-in-out;
}
input:focus {
box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .1);
transform: translateY(-.5rem)
}
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
