1.连字符断行
问题：两端对齐的效果的时候，折行效果有的时候真的很丑。
解决：使用hyphens属性。
hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。
它接受三个值：none，manual和auto。它的初始值是manual，以匹配现有的行为：我们可以用软连字符手动断字。
width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;
Paste_Image.png
2.插入换行
- 问题：对于表格元素，如何使多个<dd>元素在同一行，如何在最后一个<dd>元素后面插入换行符
- 解决方案：
使用伪元素，在<dd><dt>中间插入换行符“\A”.
在<dd><dd>中间插入“，”
使用white-space: pre;保留源代码中的空格和换行 - 重点代码：
dd + dt::before {//使用伪元素，在<dd><dt>中间插入换行符“\A”.
content: "\A";
white-space: pre;
}
dd + dd::before {//在<dd><dd>中间插入“，”
content: ', ';
font-weight: normal;
margin-left: -.25em;
}
HTML：
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dd>leaverou@mit.edu</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>
CSS：
dt, dd {
display: inline;
margin: 0;
}
dd {
font-weight: 600;
}
dd + dt::before {//使用伪元素，在<dd><dt>中间插入换行符“\A”.
content: "\A";
white-space: pre;
}
dd + dd::before {//在<dd><dd>中间插入“，”
content: ', ';
font-weight: normal;
margin-left: -.25em;
}
body {
font: 150%/1.6 Baskerville, Palatino, serif;
}
Paste_Image.png
3.文本行的斑马条纹
- 解决：利用linear-gradient创建条纹背景，使其的宽度与行高相符
- 注意：padding会使元素与条纹背景出现错位，所以要对背景设置background-origin:content-box，消除影响
pre {
padding: .5em;
line-height: 1.5;
background: hsl(20, 50%, 95%);
background-image: linear-gradient(
rgba(120,0,0,.1) 50%, transparent 0);
background-size: auto 3em; //两行
background-origin: content-box;
font-family: Consolas, Monaco, monospace;
}
code { font: inherit }
Paste_Image.png
4.调整tab的宽度
-问题：tab在浏览器中的宽度为8个字符，我们一般会调整成我们习惯的宽度4或2.
tab-size: 2
5.连字
- 问题：某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的f和i。在css第三版中，引入了font-variant-ligatures属性。
font-variant-ligatures: comon-ligatures
discretionary-ligatures
historical-ligatures
6.自定义下划线
用background-image及其相关属性来形成下划线
a {
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 .9em;
text-shadow: .05em 0 white, -.05em 0 white;
}
Paste_Image.png
a {
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 .9em;
}
Paste_Image.png
7.现实中的文字效果
凹进去的字体效果
- 思路：底部加上浅色投影或者顶部加深色投影
底部加上浅色投影
p {
padding: .8em 1em;
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
}
Paste_Image.png
顶部加上深色投影
p + p {
background: hsl(210, 13%, 30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;
}
Paste_Image.png
文字凸起效果
思路：使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底层加上一层强烈模糊的暗投影，从而实现效果
body {
background: #58a;
color: white;
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%),//亮度l逐渐变暗
0 5px 10px black; //底层加上一层强烈模糊的暗投影
font: bold 500%/1 Rockwell, serif;
}
Paste_Image.png
空心字
思路：使用SVG描边方法
<h1>CSS</h1>
<h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></h1>
h1 {
margin: 0;
color: white;
}
h1:first-child { text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }
h1 text { fill: currentColor }
h1 use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}
body {
background: deeppink;
font: bold 200%/1 Rockwell, serif;
}
Paste_Image.png
字体外发光
思路：准备几层重叠的text-shadow，不考虑偏移量，颜色保持跟字体一样。
可以加上过渡效果，使得鼠标悬停时出现效果，transition:1s.
a {
padding: .5em;
line-height:1.5;
background: #203;
color: white;
transition: 1s;
}
a:hover {
text-shadow: 0 0 .1em, 0 0 .3em;
}
Paste_Image.png
Paste_Image.png
如果在hover的时候把字体本身的颜色变成透明，则出现模糊效果
a:hover {
color: transparent;
text-shadow: 0 0 .1em white, 0 0 .3em white;
}
Paste_Image.png
用滤镜来实现模糊效果
a:hover {
filter: blur(.1em);
}
Paste_Image.png
本文整理自《CSS揭秘》
