Obeta

一些不常用的CSS3与CSS4属性总结

对于探险者来说,决定自己能力高低的地方并不是大多数人都去的地方,而是一般人不敢去的险境.与此对应的是决定一个技术人CSS3水平高低的往往不是他页面写的有多好,而是他能知道一些特殊的用法,快速完成需求开发.

因为是总结,因此不介绍具体的用法,具体可以点击每部分的 title 去 MDN 查看.

本文会持续不定期更新与补充

1.clip-path

可以对元素进行裁剪,裁剪内的部分可见,裁剪之外的不可见.此属性用来代替已经弃用的clip

Firefox 对此属性的支持非常好,还提供了路径直接编辑工具,开发的时候可以手动进行调整,可以实现很多不可思议的效果(比如动画以及shape-outside), 如果你现在正在科学上网,那么下面会显示出来 twitter 相关页面.

如果看不到可以查看这个Edit Shape Paths in CSS

2.shape-outside

正常情况下一般元素都是盒子形状,这也是为什么 CSS 中有一个盒模型.但是有时候我们并不想元素是一个盒子类型,这时候就可以使用shape-outside.

此属性可以结合上面的clip-path实现文字环绕效果.

需要单独介绍的一谢值:

  • polygon是一个多边形函数,接受任意个位置点,比如定义一个三角形shpe-outside: polygon(x1 y1, x2 y2, x3 y3);
  • inset定义了一个矩形,接受多个参数,这篇文章介绍的很好.

3.background-clip

设置当前background-imagebackground-color能延伸到的位置(image 与 color 并不移动,只是小于等于关键字的部分才可以显示出来).

目前只有以下 4 个关键字border-box,padding-box,content-box,text.当设置为text的时候可以很方便的实现炫彩的文字效果.

4.backdrop-filter

可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移).因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明.

目前 Firefox 与 Chrome 都不受支持.

5.hyphenate-limit-chars

CSS4 中的一个草案,目前并不能直接使用.对于英文这类不同语言之间的连字符是不一样的,通过这个属性我们可以自己控制如何中断连字符.

对于我们使用中文的人来说此属性并不会用上,因为中文没有连字符之类的说法.如果你需要国际化支持(比如德语),那么这个属性还是值得一看的,另外你可能需要我另外一篇关于文字对齐的文章->css3 中的 unicode-bidi 与 direction 使用

连字符样式的控制以往我们都是直接通过如下的 css 让浏览器去自动分配:

.hyphenate {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

hyphens在不同的浏览器下与不同的语言下可能有不同的表现,因此默认值并不一样.那么现在有了上面这个属性后呢?

hyphenate-limit-chars: 6 3 2;接受三个值:

  • 第一个值是要连字符的单词的最小字符限制
  • 第二个是断字前的最小字符数
  • 最后是断字后的最小字符数

hyphenate limit chars

默认情况下此属性的值是auto,这意味着浏览器会根据当前 lang 以及布局使用最合适的设置,而 CSS4 文本模块建议是5 2 2,这可能会导致很多文字中断,不过希望浏览器这次能选择好一点的设置.目前而言只有 IE/Edge 支持带前缀的实现,而 Safair 在 CSS3 就有另外的特殊实现(遗留属性):

/* legacy properties safair support*/
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2; /* ie/edge */
hyphenate-limit-chars: 6 3 2;

当然还有其它的一些属性:

  • hyphenate-limit-lines: 限制最多连续出现连字符的行数.
  • hyphenate-limit-last: 段落最后一行的断字无效.
  • hyphenation-limit-zone: 指定行的最后一个单词和文本框边缘之间允许的最大空白量.

这里就不过多介绍了,可以去这篇博文查看.

overflow-anchor

这个好像不是很好解释,直接看我这篇你所不知道的滚动锚定文章吧.

mix-blend-mode

描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合

drop-shadow()

CSS 函数给图片增加阴影,类似于box-shadow属性,不过此 CSS 函数并不像box-shadow给 CSS 盒子增加属性,而是通过判断图片的 alpha 值来应用阴影.

element

根据 dom 元素的 id 生成一个 image 图,类似于 sublime 的代码地图.

可以查看我这篇博文使用鲜为人知的 CSS element 函数创建一个 Minimap 导航器

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.