CSS3 不常用属性整理

box-decoration-break

box-decoration-break 属性属于 CSS 片段模块(CSS Fragmentation Module Level 3)中的一个属性,用于控制行内元素有关于 paddingbackgroundborder-imagebordermarginclip 属性在行内元素多行情形下的渲染形式

box-decoration-break 属性接受两个值 sliceclone,其中 slice 是其默认值

  • clone:每个盒子的片段都有独立的 borderpadding,并且 border-radiusborder-imagebox-shadowbackground 也都会独立运用于元素的每个片段
  • sliceborderpadding 不会运用于元素被打断的片段中(除首行和末行),同时 border-radius 也只会运用于元素的四个顶角,对于打断片段之处并不会有任何的效果;另外 border-imagebackground 会被运用于整个元素

该属于只能用于 inline 元素,且不能搭配 floatposition(取值为 absolute 或 fixed) 一起使用

备注

text-fill-color

text-fill-color 属性用于指定文字的填充颜色,如果和 color 属性一起使用,则会覆盖 color 属性

由于兼容性缘故,目前需要加 -webkit- 前缀

备注

text-stroke

text-stroke 是一个复合属性,用于指定文字的描边信息

该属性包含两个属性:

1
2
3
4
5
6
7
8
p {
font-size: 50px;
-webkit-text-fill-color: transparent;

-webkit-text-stroke: 1px #333;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #333;
}

备注

box-reflect

box-reflect 也是复合属性,用于设置对象的倒影

该复合属性包含三个属性:

  • direction:倒影的方向(abovebelowleftright
  • offset:与倒影的间距,lengthpercentage,允许为负值
  • mask-box-image:创建遮罩图像的方式,取值为 noneurllinear-gradientradial-gradientrepeat-linear-gradientrepeat-radial-gradient

目前仅有 ChromeSafari 支持,且需要加 -webkit- 前缀

1
box-reflect:none | <direction> <offset>? <mask-box-image>?

备注

tap-highlight-color

tap-highlight-color 属性用于设置对象轻按时的高亮色。

如果想取消高亮,则设为 transparent。

1
2
3
4
.demo {
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}

display:contents

display 在 CSS3 中新增了一个属性值 contents规范中表明设置了这个属性值的元素不会生成任何盒模型。

contents

1
2
> The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
>

元素本身不能生成任何盒模型,但它的子元素和伪元素可以正常生成盒模型;出于生成盒模型以及布局的考虑,该元素会被它的子元素或伪元素替代,元素看起来就像不在 DOM 树中一样

在 Flex 布局中,如果 Flex Item 设置了该属性,那么 Item 的直接子元素也可以按照 Flex Item 的规则进行布局。

同理,在 Grid 布局中,设置了该属性的 Grid Item 表现出来的效果与 display: subgrid 类似。

备注

Demo

Flex Demo

Grid Demo

Caniuse