当我们选中网页上的文字时，通常的效果是蓝底白字，其实，底色和字体颜色是可以改变的。
我们可以使用伪元素来实现这种效果：
首字下沉，是否似曾相识呢？哦，是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果，其他文字围绕在它周围。
看上去还是这么回事。
通过锚点，我们可以滚动到网页特定的位置，原始的锚点跳转是没有过渡效果的。注意滚动条：
通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。
caret-color 属性可以让我们自定义 input 框闪烁的光标，是不是很神奇鸭
给透明背景图片加背景，感觉很厉害的样子。两行 CSS 样式九搞定咯：
我们可以修改滚动条的样式，滚动条变得更加炫酷。
如果你不想让用户选中页面上的文字，就可以用这个特性了。
很多情况下都需要应用到IE盒子模型的特性，让元素的宽度、高度包含border和padding。
比如有这么一个需求，设计一个标题，标题中的图片需要悬浮在多行所有文字上，如上图所示。
现在我们想要调试这个标题的层级关系。试着使用如下的 CSS 作用于所有的元素。
这样我们所有的元素都会添加一个边框。可以方便的看到不同元素的位置关系。
我们再对这个样式进行改进，添加 color 和 background，并且使用 !important 来修饰（我们只在 debug 的时候用到该样式，!important 是个不错的选择，来大大减少样式冲突的可能）。
修改后的标题样式如上所示。给所有元素的 color 和 background 设置一个半透明的蓝色使得 debug 界面更加清晰，而且使用半透明的颜色有一个好处是多级嵌套的地方颜色会变深（更白或更蓝）这样我们可以知道更多的细节。
我们还可以更具自己的情况对这个 debug 样式做调整，比如标题中现在用了阴影，对视觉上有一定的影响我们可以强制去掉，还有不希望显示矢量图，最终我们获得如下的样式：
