前言
不知不觉「分享几个 CSS 技巧」更新到第二篇了，往期文章请戳此链接：分享几个 CSS 技巧 - 第一波。
正所谓「需求」是程序员的第一生产力，正是有了 PM 和 UI 千奇百怪的要求，才会使我们的编程技能（CSS）不断攀升。
这次，我又来给大家介绍几个好用的 CSS 技巧，没准能解决你的问题，或者拓展下知识面也是好的。
由于掘金编辑器不支持 iframe，所以无法直接嵌入 CodePen 例子（我的个人博客可以直接预览），于是我把每个效果图都贴出来了，均在 Chrome 下测试得出。
给文字加边框
通常，border 属性是为 HTML 元素加上边框的不二选择，但这个边框是基于盒子模型，即呈现在元素的四周，无法对盒子内的文字生效。
假设我想让文字带有 1px 的黑色边框，首选 text-shadow ，它能设置多个文字阴影，从视觉上达到边框效果。
HTML 代码如下：
<div class="text">I Like CSS World</div>
CSS 代码很简单，将 text-shadow 的 blur 值设为 0，分别向右下、左上、右上、左下方向偏移 1px.
.text {
color: white;
font-size: 4em;
text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px
1px 0px black;
}
text-shadow 兼容所有现代浏览器，但仔细观察，会发现边缘处有锯齿状，毕竟是模拟实现，效果差强人意。
第二种方法选用 -webkit-text-stroke 属性，字面意思就是为文字加上边框。
它是 -webkit-text-stroke-width 和 -webkit-text-stroke-text 两个属性的缩写形式。
.text {
color: white;
font-size: 4em;
-webkit-text-stroke: 1px black;
}
-webkit-text-stroke 使用简单，效果出色。
但相信你也注意到了 "webkit"，一般带有前缀的属性兼容性较差，又或非 CSS 官方认定的属性（浏览器厂商自己实现），最好不要在生产环境使用它。
给不规则图形、图像加边框
在一次需求中，我需要在页面画一个带黑色边框的“梯形”，思来想去，着实不想用 Canvas、SVG，大材小用。
好在有 clip-path，该属性能裁剪 HTML 元素，搭配上关键值 polygon()，就能实现自定义的多边形裁剪。
最重要的是，可通过叠加两个大小不同的多边形，来实现边框效果，看看我写的例子吧~
<div class="shape"></div>
.shape {
position: relative;
width: 200px;
height: 100px;
background: black;
clip-path: polygon(10% 0%, 90% 0, 100% 100%, 0% 100%);
}
.shape::after {
position: absolute;
top: 2px;
left: 2px;
display: block;
content: "";
width: 196px;
height: 96px;
background: greenyellow;
clip-path: polygon(10% 0%, 90% 0, 100% 100%, 0% 100%);
}
核心要点：内部图形 width = 父元素 width - 2 * left，height: 父元素高度 - 2 * top，left 和 top 的偏移量即为边框的宽度。
如果现在给到一张图像，如何给它也加上边框？
借助于 filter: drop-shadow()，轻松实现覆盖图像的边框，其思想和重叠的 text-shadow 大同小异。
<img class="border" src="https://cdn.baobangdong.cn/react.png" alt="" />
<img src="https://cdn.baobangdong.cn/react.png" alt="" />
img {
width: 200px;
object-fit: cover;
}
.border {
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);
}
不得不说，CSS 真的很 Cool~
当单词被折行切割时，自动加上 "-"
我在日常开发过程中，某些项目需要上线多个国家地区，国际化文案必不可少，一些单词在中文、英语语种下长度尚可，但在诸如德语、俄罗斯语种下，同样的单词翻译后就变得特别长。
| 语种 | 翻译 |
|---|---|
| 中文 | 排行榜积分 |
| 英语（en) | leaderboard tokens |
| 德语（de-DE） | Punkte-Bestenliste des Tages |
| 俄罗斯语（ru-RU） | ежедневные баллы таблицы лидеров |
为了不让文字超出容器宽度，影响界面显示，我会添加一行 CSS 声明： word-break: break-all.
它的作用是一段文字触发换行时，将处于句尾的单词强制截断，防止文字溢出。
<div class="text cut-off">Punkte-Bestenliste des Tages</div>
<div class="text">Punkte-Bestenliste des Tages</div>
.text {
width: 60px;
border: 1px solid;
}
.cut-off {
word-break: break-all;
margin-bottom: 20px;
}
通过例子可以看到，"Bestenliste" 这个单词被强制截断了，有效防止了溢出。
但俄罗斯本地的同事看了之后，不是很满意，他认为 "Bestenliste" 就算被截断，也应该截断成 "Besten-liste"，才符合当地阅读习惯。
本着人道主义的关怀，我毅然接下了这个优化点，还记得我们的理念是是什么？
凡是能用 CSS 解决， 都将用 CSS 解决
在查阅了 MDN 相关资料后，一个名叫 hyphens 的 CSS 属性引起了我的注意。
它有两个非常关键的值：hyphens: manual | auto.
先说 hyphens: manual，意为手动设置出现连字符的位置，有两种方式：
-
U+2010 (HYPHEN)，将
‐插入文字中，无论是否触发换行，都会在强制在插入位置显示连字符 -
U+00AD (SHY)，将
­插入文字中，当触发换行时，插入位置显示连字符，否则连字符不会被显示
直接看 codepen 例子：
<div class="text">Punkte-Besten­liste des Tages</div>
<div class="text">Punkte-Besten‐liste des Tages</div>
<div class="text break">Punkte-Besten­liste des Tages</div>
.text {
width: 100px;
border: 1px solid;
margin-bottom: 20px;
}
.break {
width: 60px;
}
再来说说 hyphens: auto，意为自动对被截断的单词加上连字符，它会依据 <html lang="en"> 上的 lang 属性，对单词进行“智能”判断。
并不是很好理解，还是上例子加以佐证：
<div class="text">extraordinary</div>
<div class="text auto">extraordinary</div>
.text {
width: 70px;
border: 1px solid;
}
.auto {
margin-top: 20px;
hyphens: auto;
}
codepen 的默认 lang 等于 en，故 "extraordinary" 在英文语法下因换行被拆分为 ex - traordi - nary.
需要注意，各浏览器对各语种的支持度各不相同，其实上面所说的“智能”是基于浏览器内置了许多语种词典，才明确将连字符放到单词的何处位置最合适。
结尾
四年前，就是因为学习网页设计时，被 CSS 奇妙世界所吸引，欲罢不能。
愿时光荏苒，我还是那个不忘初心的小前端！
