层叠样式CSS小记

HTML 使你存在,而 CSS 描绘了你的模样

弥散阴影

源码

弥散阴影相对于普通投影能够使得主体更加立体、整体画面显得更为精致、通透。基于纯 CSS3 即可实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
& main {
width: 400px;
border-radius: 3px;
background: co_1;

& .main_inner {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
background: co_1;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
// ...
}

&:before, &:after {
position: absolute;
display: block;
border-radius: 3px;
content: '';
}

&:before {
top: 5px;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: co_2;
transform: scaleX(.97);
}

&:after {
bottom: -5px;
left: 50%;
z-index: 1;
width: 85%;
height: 50%;
background: co_3;
filter: blur(15px);
opacity: .8;
transform: translateY(-50%);
}
}

效果


一般投影的效果对比:

虽然多费了几行笔墨,但是能够大幅提高用户体验还是非常值得的。

定义滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//定义滚动条整体
&::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0)
}

&::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0)
}

&::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: $co8;
}

强制不换行

1
2
3
.demo {
white-space: nowrap;
}

保持原换行

1
2
3
.demo {
white-space: pre-wrap;
}

九宫格布局

grid 方式

grid 布局是目前实现九宫格最简单的方式,但是由于存在兼容性问题,所以目前并不作为首选方案。

1
2
3
4
5
6
items{
display grid
grid-template-columns 33.33% 33.33% auto
grid-column-gap 3px
grid-row-gap 3px
}

flex 方式

flex 相对于传统绝对定位或者浮动更加灵活,目前已经被所有浏览器支持,是实现九宫格布局的首选方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
items{
display flex
flex-direction row
flex-wrap warp
justify-content center
& item{
width calc((100 - itemMargin * 2) / 3)
border-right itemMargin
&:nth-of-type(3n){
margin-right 0
}
}
}

去输入框阴影

1
2
3
input {
border: 0;
}

纯 CSS 平滑滚动

1
2
3
4
html,
body {
scroll-behavior: smooth;
}

镂空效果

1
2
3
4
5
6
7
8
9
10
.mask {
height: 300px;
width: 300px;
background-image: url("...背景图");
background-size: cover;
-webkit-mask: url("...蒙版");
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

高光效果(mask 应用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.rule {
display inline-block
height 50px
width 50px
float right
display inline-block
background-image url('../assets/images/index_rule_2.png')
background-position center
background-size contain
background-repeat no-repeat
position relative
overflow hidden
&:before {
content ''
display inline-block
position absolute
height 100%
width 100%
background-image url('../assets/images/ele_shine.png')
background-position center
background-size contain
background-repeat no-repeat
mask url('../assets/images/index_rule_2.png')
mask-position center
mask-size contain
mask-repeat no-repeat
animation shine 3500ms infinite
}
}

@keyframes shine {
from {
background-position -100px center
}
60% {
background-position 100px center
}
to {
background-position 100px center
}
}

翻转

1
2
3
4
5
//水平翻转
transform scale(-1, 1)

//垂直翻转
transform scale(1, -1)

平滑抗锯齿

1
2
3
4
#app {
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
}

变形原点

1
2
3
4
5
demo:{
transform-origin:0 0//左上
transform-origin:50% //中
transform-origin:100% 100%//右下
}

停留最后一帧

1
2
3
demo: {
animation-fill-mode: forwards;
}

图片底端空隙

图片的 display 属性默认是 inline(我学习的时候是这样说的,不知道有没有上了堂假课),而这个属性的 vertical-align 的默认值是 baseline。所以就会出现图片底部出现一个小留白区域。

1
2
3
img{
vertical-align middle
}

超出省略

1
2
3
4
text-overflow ellipsis
display -webkit-box
-webkit-box-orient vertical
-webkit-line-clamp 2

选中轮廓

1
2
3
input,select {
outline 0
}

原生变量

1
2
3
4
5
6
7
:root {
--color: brown;
}

div {
color: var(--color);
}

判断屏幕方向

1
2
3
4
5
6
@media screen and (orientation: portrait) {
/* 竖屏 */
}
@media screen and (orientation: landscape) {
/* 横屏 */
}

over-flow 失效

分析:普通定位高级元素无法限制相对/绝对定位低级元素,将高级元素设置为相对/绝对定位

1
2
3
4
5
6
7
main{
position relative
over-flow hidden
}
li{
position absolute
}

placeholder 颜色

1
2
3
input::-webkit-input-placeholder {
color: c5;
}

数字键盘

1
<input type="number/tel" />

全体大写

1
2
3
p {
text-transform: uppercase;
}

禁用事件

1
2
3
.dom {
pointer-events: none;
}

媒介查询

1
2
3
4
5
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}