分享几个 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, -1px1px 0px black;}
css
.text {color: white;font-size: 4em;text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px1px 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),将
‐
插入文字中,无论是否触发换行,都会在强制在插入位置显示连字符 -
U+00AD (SHY),将
­
插入文字中,当触发换行时,插入位置显示连字符,否则连字符不会被显示
直接看 codepen 例子:
再来说说 hyphens: auto
,意为自动对被截断的单词加上连字符,它会依据 <html lang="en">
上的 lang 属性,对单词进行“智能”判断。
并不是很好理解,还是上例子加以佐证:
codepen 的默认 lang 等于 en,故 "extraordinary" 在英文语法下因换行被拆分为 ex - traordi - nary
.
需要注意,各浏览器对各语种的支持度各不相同,其实上面所说的“智能”是基于浏览器内置了许多语种词典,才明确将连字符放到单词的何处位置最合适。
结尾
四年前,就是因为学习网页设计时,被 CSS 奇妙世界所吸引,欲罢不能。
愿时光荏苒,我还是那个不忘初心的小前端!