CSS揭秘阅读笔记
# 尽量减少 改动时要编辑的地方
看一下这个按钮
button {
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
这段代码在可维护性方面存在一些问题， 要修改这个按钮的样式的话得改好多行代码
比如我们决定改变字号(可能是为了生成 一个更大、更重要的按钮)，就得同时调整行高，因为这两个属性都写成了 绝对值。更麻烦的是，行高并没有反映出它跟字号的关系，因此我们还得做 些算术，算出字号改变之后的行高该是多少。当某些值相互依赖时，应该把 它们的相互关系用代码表达出来。
因 此，把代码改成下面这样会更易维护:
font-size: 125%;
line-height: 1.5;
1
2
2
同理应用到其它属性
button {
padding: 0.3em 0.8em;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
border-radius: 0.2em;
box-shadow: 0 0.05em 0.25em rgba(0, 0, 0, 0.5);
color: white;
text-shadow: 0 -0.05em 0.05em rgba(0, 0, 0, 0.5);
font-size: 125%;
line-height: 1.5;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
现在我们只要覆盖 background-color 属性，就可以得到不同颜色版本 的按钮了
button.cancel {
background-color: #c00;
}
button.ok {
background-color: #6b0;
}
1
2
3
4
5
6
2
3
4
5
6
# inherit 关键字
在创建提 示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式
.callout {
position: relative;
}
.callout::before {
content: '';
position: absolute;
top: -0.4em;
left: 1em;
padding: 0.35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 斜向条纹
div {
background: repeating-linear-gradient(
60deg,
#fb3,
#fb3 15px,
#58a 0,
#58a 30px
);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 生成棋盘
div {
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(
45deg,
#bbb 25%,
transparent 0
), linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 老式信封边框条纹
div {
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent
0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
}
1
2
3
4
5
6
2
3
4
5
6
# 切角效果
div {
background: #58a;
background-size: 50% 50%;
background-repeat: no-repeat;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(
-135deg,
transparent 15px,
#58a 0
) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(
45deg,
transparent 15px,
#58a 0
) bottom left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 弧形切角
div {
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 梯形标签页
nav > a {
position: relative;
display: inline-block;
padding: 0.3em 1em 0;
}
nav > a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(
hsla(0, 0%, 100%, 0.6),
hsla(0, 0%, 100%, 0)
);
border: 1px solid rgba(0, 0, 0, 0.4);
border-bottom: none;
border-radius: 0.5em 0.5em 0 0;
box-shadow: 0 0.15em white inset;
transform: perspective(0.5em) rotateX(5deg);
transform-origin: bottom;
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 文字 shadow
div {
color: deeppink;
border: 2px solid;
text-shadow: 0.1em 0.2em yellow;
filter: drop-shadow(0.05em 0.05em 0.1em gray);
}
1
2
3
4
5
6
2
3
4
5
6
# 毛玻璃效果
body,
main::before {
background: url('tiger.jpg') 0 / cover fixed;
}
main {
position: relative;
background: hsla(0, 0%, 100%, 0.3);
overflow: hidden;
}
main::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
margin: -30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 折角效果
.note {
position: relative;
background: #58a; /* 回退样式 */
background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
border-radius: 0.5em;
}
.note::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(
to left bottom,
transparent 50%,
rgba(0, 0, 0, 0.2) 0,
rgba(0, 0, 0, 0.4)
) 100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 斑马纹
div {
padding: 0.5em;
line-height: 1.5;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 0);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 自定义下划线
div {
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: 0.2em 2px;
background-position: 0 1em;
}
1
2
3
4
5
2
3
4
5
# 文字凸起效果
div {
color: white;
background: hsl(0, 50%, 45%);
text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}
1
2
3
4
5
6
2
3
4
5
6
# 鼠标图标样式表
以下为 Mac 系统
# 逐帧动画
@keyframes loader {
to {
background-position: -800px 0;
}
}
.loader {
width: 100px;
height: 100px;
background: url(img/loader.png) 0 0;
animation: loader 1s infinite linear;
/* 把文本隐藏起来 */
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}
div {
animation: loader 1s infinite steps(8);
}
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
上次更新: 2023/04/05, 09:41:10