此篇博客是学习《CSS 揭秘》一书的学习笔记。
1. 连字符断行
当文字超出容器元素的宽度时，会换行。默认情况下，文字左对齐且一个完整的单词不会跨行显示，这样每行的末尾会产生参差不齐的空白（见下面左图）。
text-align: justify; 属性能够使文字两端对齐，最后一行无效（见下方右图）。
此属性有个缺点：当容器宽度很小，且单词长度差距很大时，会导致每行文字间隙的差异很大。
CSS3 中引入了一个新的属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。它接受三个值：
none: 即使文字中的字符表示换行符，文字也不会在换行符处断开；manual: 只有在单词内部的字符（­）表示换行的情况下，单词才会被断开；auto: 只要遵循它所选择使用的任何规则，浏览器就可以自由地在合适的连字点处自动分词。
注: 部分支持，如谷歌浏览器目前仅在安卓和 Mac 平台支持该属性。
2. 插入换行
在通常情况下，采用定义列表是因为我们立志在互联网上以身作则，坚持使用合适的标签、合理的语义——哪怕在视觉上所要呈现的只是 一行行的名值对，我们也会认真对待。举例来说，如下面这段结构代码：
HTML
1
2
3
4
5
6
7
8
9
10
11
<dl class="wrap-5-2">
<dt>姓名</dt>
<dd>No One</dd>
<dt>电话</dt>
<dd>13100000000</dd>
<dd>13200000000</dd>
<dt>邮箱</dt>
<dd>EMAIL@domain.com</dd>
</dl>
我们期望的显示效果如下：
- 姓名
- No One
- 电话
- 13100000000
- 13200000000
- 邮箱
- EMAIL@domain.com
CSS 如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
dl.wrap-5-2 {
padding: 10px;
background: #ff7873;
border-radius: 5px;
}
dl.wrap-5-2 dt,
dl.wrap-5-2 dd {
display: inline; /* 取 inline-block 时，换行符 \A 无效 */
margin-inline-start: 0;
}
dl.wrap-5-2 dd {
font-weight: bold;
}
dl.wrap-5-2 dt::after {
content: ': ';
}
dl.wrap-5-2 dd + dt::before {
content: '\A'; /* \000A 或 \A 表示换行符 */
white-space: pre; /* 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 */
}
dl.wrap-5-2 dd + dd::before {
content: ', ';
}
注：
- CSS 中
\000A或\A表示换行符。默认情况下，这些换行符会与相邻的其他空白符进行合并，因此需要配合第2条实现换行。 white-space: pre;: 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。+为相邻兄弟选择器，dd + dt表示 dd 元素的下一个 dt 兄弟元素（两者相邻）；~则为通用兄弟选择器。
3. 文本行的斑马条纹
我们会经常在表格中使用 :nth-child() 和 :nth-of-type() 伪类实现斑马条纹。
此方法并不适用于文本行，但我们可以使用渐变来给文本生成一个条纹背景。
让我们用这个方法给代码加上斑马条纹。
HTML
1
2
3
4
5
<pre class="zebra-5-3">
<code>
代码省略...
</code>
</pre>
效果及 CSS 代码如下:
pre.zebra-5-3{
padding: 0 1em;
line-height: 1.5;
background-color: #f2f2f2;
background-image: linear-gradient(rgba(255,120,115,.1) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
pre.zebra-5-3 code {
background: none;
color: #333;
}
注:
- 条纹背景尺寸使用
em单位来自适应font-size的变化。 - 由于
line-height: 1.5;，所以条纹背景高度为3em，因此这两个值要相互匹配。 background-origin: content-box;使背景图片的摆放以 content 区域为参考。
4. 下划线
使用 text-decoration: underline; 生成下划线很方便，但当我们想要自定义此下划线时就不那么简单了。
我们可以通过设置背景来生成自定义样式的下划线。
直线下划线
CSS
1
2
3
4
5
.underline-5-4 span {
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1em;
}
虚线下划线
CSS
1
2
3
4
5
.underline-5-4-dashed span {
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: 1em 1px;
background-position: 0 1em;
}
波浪下划线
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.underline-5-4-wave span {
font-size: 20px;
background: linear-gradient(-45deg,
transparent 40%,
red 0,
red 60%,
transparent 0)
0 1em, /* 0 1em 为 background-position */
linear-gradient(45deg,
transparent 40%,
red 0,
red 60%,
transparent 0)
.1em 1em; /* .1em 1em 为 background-position */
background-repeat: repeat-x;
background-size: .2em .1em;
}
5. 字体效果
5.1 凸版印刷效果
在拟物化风格的网页中，凸版印刷效果是最流行的文字美化手法之一。
这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行。
实际上，在最早期的图形界面中，为按钮生成按下或浮起效果就用到了类似的原理：出现在底部的浅色投影（或者出现在顶部的暗色投影）会让人产生物体是凹进平面内的错觉。同理，出现在底部的暗色投影（或者出现在顶部的浅色投影）会让人产生物体从平面上凸起的错觉。这种方法之所以奏效，是因为我们在现实世界中早已习惯了光源总是悬在头顶。在这样的环境里，凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮。
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.font-5-5-1 {
display: inline-block;
margin: 0 14px 14px 0;
padding: 10px;
width: 200px;
font-size: 20px;
border-radius: 5px;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
}
.font-5-5-1.shadow-1 {
/* offset-x | offset-y | blur-radius | color */
text-shadow: 0 .05em .05em hsla(0, 0%, 100%, .8);
}
注: text-shadow 前后四个值分别为x偏移、y偏移、模糊半径和颜色，颜色也可以放在第一位。
当背景为深色，字体为浅色时，我们需要把 text-shadow 颜色改为深色，并把阴影改为 -Y 方向偏移。
CSS
1
2
3
4
5
6
7
.font-5-5-1.reverse {
background: hsl(210, 13%, 40%);
color: hsl(210, 13%, 75%);
}
.font-5-5-1.reverse.shadow-1 {
text-shadow: 0 -.05em .05em black;
}
5.2 空心字效果
目前浏览器还不支持 text-shadow 属性中的扩张参数，因此我们可以使用多个 text-shadow 来生成空心字效果。
HTML
1
<div class="font-5-5-2 stroked-text">空心字 stroked-text</div>
CSS
1
2
3
4
.font-5-5-2.stroked-text {
text-shadow: 1px 1px #333, 1px -1px #333,
-1px 1px #333, -1px -1px #333;
}
5.3 文字发光效果
在某些类型的网站中，文字外发光效果常用于凸显标题，或给链接添加鼠标悬停效果。
CSS
1
2
3
.font-5-5-3.glow {
text-shadow: 0 0 .1em, 0 0 .3em;
}
CSS
1
2
3
4
5
6
7
.font-5-5-3.glow-hover {
cursor: pointer;
transition: text-shadow 1s;
}
.font-5-5-3.glow-hover:hover {
text-shadow: 0 0 .1em, 0 0 .3em;
}
5.4 文字凸起效果
另一种在拟物化风格的网站中流行（且被滥用）的效果是文字凸起（伪3D）效果。
这其中的主要思路就是使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果。
CSS
1
2
3
4
5
6
7
8
.font-5-5-4.extruded {
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%),
0 4px hsl(0,0%,70%),
0 5px hsl(0,0%,65%),
0 5px 10px black;
}