CSS代码块备忘
# CSS代码块备忘
# 1.三角形
.box:before{
display:block;width:0;height:0;content:'';
position:absolute; //设置三角形位置.box相对定位;
border:10px solid transparent;
border-top-color:red;
}
1
2
3
4
5
6
2
3
4
5
6
# 2.自定义滚动条
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(orange,red);border-radius:10px;}
::-webkit-scrollbar-track{background-color:pink;}
1
2
3
2
3
# 3.文字溢出省略号
.nowrap{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:200px;} /*单行*/
.nowrap2{
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}/*多行*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 4.圣杯布局(float+margin)
<div class="main">
<div class="center">中间中间中间中间中间中间中间后</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.main{*zoom: 1;padding-left: 200px;padding-right:150px;}
.center{
float:left;width:100%;height:200px;background:red;
}
.left {
float:left;width:200px;height:200px;background:yellow;
margin-left:-100%;position:relative;left:-200px;
}
.right{
float:left;width:150px;height:200px;
background:gainsboro;margin-left:-150px;
position:relative;left:150px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 5. 优惠券
.coupon{
width: 300px; height: 100px; position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 6. 使用vw定制rem自适应布局
html { font-size:calc(100vw / 7.5);} /*移动端对应750px设计稿*/
html { font-size:calc(100vw / 19.2);} /*PC端对应1920px设计稿*/
1
2
2
# 7.设置input 的placeholder的字体样式
input::-webkit-input-placeholder {color: #bbb;} /* Chrome/Opera/Safari */
input::-moz-placeholder {color: #bbb;} /* Firefox 19+ */
input:-ms-input-placeholder {color: #bbb;} /* IE 10+ */
input:-moz-placeholder {color: #bbb;}/* Firefox 18- */
1
2
3
4
2
3
4
# 8
上次更新: 2020/09/27, 13:09:00