分享几个 CSS 技巧 - 第二波

前言

不知不觉「分享几个 CSS 技巧」更新到第二篇了，往期文章请戳此链接：分享几个 CSS 技巧 - 第一波。

正所谓「需求」是程序员的第一生产力，正是有了 PM 和 UI 千奇百怪的要求，才会使我们的编程技能（CSS）不断攀升。

这次，我又来给大家介绍几个好用的 CSS 技巧，没准能解决你的问题，或者拓展下知识面也是好的。

给文字加边框

通常，border 属性是为 HTML 元素加上边框的不二选择，但这个边框是基于盒子模型，即呈现在元素的四周，无法对盒子内的文字生效。

假设我想让文字带有 1px 的黑色边框，首选 text-shadow ，它能设置多个文字阴影，从视觉上达到边框效果。

HTML 代码如下：

html
<div class="text">I Like CSS World</div>

html
<div class="text">I Like CSS World</div>

CSS 代码很简单，将 text-shadow 的 blur 值设为 0，分别向右下、左上、右上、左下方向偏移 1px.

css
.text {
  color: white;
  font-size: 4em;
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px
      1px 0px black;
}

css
.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 两个属性的缩写形式。

css
.text {
  color: white;
  font-size: 4em;
  -webkit-text-stroke: 1px black;
}

css
.text {
  color: white;
  font-size: 4em;
  -webkit-text-stroke: 1px black;
}

-webkit-text-stroke 使用简单，效果出色。

但相信你也注意到了 "webkit"，一般带有前缀的属性兼容性较差，又或非 CSS 官方认定的属性（浏览器厂商自己实现），最好不要在生产环境使用它。

给不规则图形、图像加边框

在一次需求中，我需要在页面画一个带黑色边框的“梯形”，思来想去，着实不想用 Canvas、SVG，大材小用。

好在有 clip-path，该属性能裁剪 HTML 元素，搭配上关键值 polygon()，就能实现自定义的多边形裁剪。

最重要的是，可通过叠加两个大小不同的多边形，来实现边框效果，看看我写的例子吧~

核心要点：内部图形 width = 父元素 width - 2 * left，height: 父元素高度 - 2 * top，left 和 top 的偏移量即为边框的宽度。

如果现在给到一张图像，如何给它也加上边框？

借助于 filter: drop-shadow()，轻松实现覆盖图像的边框，其思想和重叠的 text-shadow 大同小异。

不得不说，CSS 真的很 Cool~

当单词被折行切割时，自动加上 "-"

我在日常开发过程中，某些项目需要上线多个国家地区，国际化文案必不可少，一些单词在中文、英语语种下长度尚可，但在诸如德语、俄罗斯语种下，同样的单词翻译后就变得特别长。

语种	翻译
中文	排行榜积分
英语（en)	leaderboard tokens
德语（de-DE）	Punkte-Bestenliste des Tages
俄罗斯语（ru-RU）	ежедневные баллы таблицы лидеров

为了不让文字超出容器宽度，影响界面显示，我会添加一行 CSS 声明： word-break: break-all.

它的作用是一段文字触发换行时，将处于句尾的单词强制截断，防止文字溢出。

通过例子可以看到，"Bestenliste" 这个单词被强制截断了，有效防止了溢出。

但俄罗斯本地的同事看了之后，不是很满意，他认为 "Bestenliste" 就算被截断，也应该截断成 "Besten-liste"，才符合当地阅读习惯。

本着人道主义的关怀，我毅然接下了这个优化点，还记得我们的理念是是什么？

凡是能用 CSS 解决，都将用 CSS 解决

在查阅了 MDN 相关资料后，一个名叫 hyphens 的 CSS 属性引起了我的注意。

它有两个非常关键的值：hyphens: manual | auto.

先说 hyphens: manual，意为手动设置出现连字符的位置，有两种方式：

U+2010 (HYPHEN)，将 &hyphen; 插入文字中，无论是否触发换行，都会在强制在插入位置显示连字符
U+00AD (SHY)，将 &shy 插入文字中，当触发换行时，插入位置显示连字符，否则连字符不会被显示

直接看 codepen 例子：

再来说说 hyphens: auto，意为自动对被截断的单词加上连字符，它会依据 <html lang="en"> 上的 lang 属性，对单词进行“智能”判断。

并不是很好理解，还是上例子加以佐证：

codepen 的默认 lang 等于 en，故 "extraordinary" 在英文语法下因换行被拆分为 ex - traordi - nary.

需要注意，各浏览器对各语种的支持度各不相同，其实上面所说的“智能”是基于浏览器内置了许多语种词典，才明确将连字符放到单词的何处位置最合适。

结尾

四年前，就是因为学习网页设计时，被 CSS 奇妙世界所吸引，欲罢不能。

愿时光荏苒，我还是那个不忘初心的小前端！

前言

给文字加边框

给不规则图形、图像加边框

当单词被折行切割时，自动加上 "-"

结尾

Reference