分享几个 CSS 技巧 - 第二波

July 09, 2021

前言

不知不觉「分享几个 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 * leftheight: 父元素高度 - 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


B2D1 (包邦东)

Written by B2D1 (包邦东)