Outman's blog

【代码】【前端技巧】CSS常用知识碎片（九）

利用叠加实现文字水印。

box-shadow只会在border box盒子周围一圈显示阴影，透明的虚线框和中间的镂空部分都看不到阴影效果，而drop-shadow()函数会在每一个虚线框的实线部分下方留下独立的投影效果。

CSS自定义属性命名：支持数字、短横线、空格、CJK文字等，不支持包含等特殊字符特殊字符,若要使用特殊字符，需要加上转义符CSS自定义属性的作用域:若定义自定义属性在子元素，则无法作用域父元素，所以通常会将自定义属性定义在:root伪类中，保证所有页面和任意标签元素都能使用自定义属性CSS自定义属性不能自身赋值CSS自定义属性不支持用在媒体查询中在HTML标签中设置CSS自定义属性：style--color;

only老旧的浏览器会忽视无法识别的媒体条件和媒体特性，为了让老旧的浏览器不识别新的查询语句，设计了only修饰符，放在媒体类型的前面。这样only screen and (color)查询语句中的CSS代码就再也不会被老旧的浏览器解析了，因为这些老旧的浏览器认为only是非法的。如今这些老旧的浏览器都已被淘汰，only修饰符就没有再使用的必要了。not否定查询语句。

* 关键字属性值 *//* 值 *//* 百分比值 */

flex: 1 | flex: 1 1 0% | 推荐 || flex: 0 | flex: 0 1 0% | 适用场景少 || flex: initial | flex: 0 1 auto | 初始值，常用 || flex: auto | flex: 1 1 auto | 适用场景少，但很有用 |flex-grow属性指定了容器剩余空间多余时候的分配规则，默认值是0，表示多余空间不分配。

【代码】【前端技巧】CSS常用技巧碎片（二）

如果outline属性不能使用（如无障碍访问需要），则使用box-shadow属性；动态文本内容换行使用word-break:break-all和wordwrap:break-word组合代码，如果要彻底换行，还可以使用line-break:anywhere。如果outline属性不能使用，则使用border-image属性。静态内容排版不建议使用word-break属性、word-wrap属性或者line-break属性，如果是英文单词，则使用。如果需要轮廓只有一个方向，则不考虑outline属性。

CSS优先级规则

【代码】【前端技巧】文本内容单行省略及多行省略。