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