阅读 779

分享几个 CSS 技巧 - 第二波

前言

不知不觉「分享几个 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;
}
复制代码

CodePen 在线预览地址

text-shadow 兼容所有现代浏览器,但仔细观察,会发现边缘处有锯齿状,毕竟是模拟实现,效果差强人意。

第二种方法选用 -webkit-text-stroke 属性,字面意思就是为文字加上边框。

它是 -webkit-text-stroke-width-webkit-text-stroke-text 两个属性的缩写形式。

.text {
  color: white;
  font-size: 4em;
  -webkit-text-stroke: 1px black;
}
复制代码

CodePen 在线预览地址

-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%);
}
复制代码

CodePen 在线预览地址

核心要点:内部图形 width = 父元素 width - 2 * leftheight: 父元素高度 - 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);
}

复制代码

CodePen 在线预览地址

不得不说,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;
}
复制代码

CodePen 在线预览地址

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

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

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

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

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

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

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

  • U+2010 (HYPHEN),将 &hyphen; 插入文字中,无论是否触发换行,都会在强制在插入位置显示连字符

  • U+00AD (SHY),将 &shy 插入文字中,当触发换行时,插入位置显示连字符,否则连字符不会被显示

直接看 codepen 例子:

<div class="text">Punkte-Besten&shy;liste des Tages</div>

<div class="text">Punkte-Besten&hyphen;liste des Tages</div>

<div class="text break">Punkte-Besten&shy;liste des Tages</div>
复制代码
.text {
	width: 100px;
	border: 1px solid;
	margin-bottom: 20px;
}

.break {
	width: 60px;
}

复制代码

CodePen 在线预览地址

再来说说 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 在线预览地址

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

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

结尾

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

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

Reference

文章分类
前端
文章标签