CSS中的非布局样式
前言
CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括:
- 字体、字重、颜色、大小、行高
- 背景、边框
- 滚动、换行
- 装饰性属性(粗体、斜体、下划线)等。
这篇文章,我们来对上面的部分样式做一个回顾。
边框
如何用边框画一个三角形?详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
文字换行
ovferflow-wrap:通用的属性。用来说明当一个不能被分开的字符串(单词)太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。
word-break:指定了怎样在单词内断行。这里涉及到CJK(中文/日文/韩文)的文字换行。
white-space:空白处是否换行。
上面这三个 css 属性进行组合,可以设置各种不同的属性。
当然,如果想让一段很长的文本不换行,可以直接设置white-space: nowrap
这一个属性即可。
CSS Hack
CSS Hack 的方式:不合法但可以生效的写法。
可以用来解决一些浏览器的兼容性问题。
缺点:难理解、难维护、易失效(比如浏览器升级后,hack可能会失效)。
替代方案:特性检测。
替代方案:针对性加 class
CSS 效果
我们可以利用 CSS 实现各种效果,常见的效果属性有:
box-shadow:盒子的阴影
text-shadow:文本的阴影
border-radius
background
clip-path