CSS3 不常用属性整理

发表于 | 更新于: | 分类于
字数统计: 512 | 阅读时长 ≈ 2

box-decoration-break

box-decoration-break 属性属于 CSS 片段模块（CSS Fragmentation Module Level 3）中的一个属性，用于控制行内元素有关于 padding、background、border-image、border、margin 和 clip 属性在行内元素多行情形下的渲染形式

box-decoration-break 属性接受两个值 slice 和 clone，其中 slice 是其默认值

  • clone：每个盒子的片段都有独立的 border 和 padding，并且 border-radius、border-image、box-shadow 和 background 也都会独立运用于元素的每个片段
  • slice：border和 padding 不会运用于元素被打断的片段中（除首行和末行），同时 border-radius 也只会运用于元素的四个顶角，对于打断片段之处并不会有任何的效果；另外 border-image 和 background 会被运用于整个元素

该属于只能用于 inline 元素，且不能搭配 float 和 position（取值为 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：倒影的方向（above、below、left、right）
  • offset：与倒影的间距，length 或 percentage，允许为负值
  • mask-box-image：创建遮罩图像的方式，取值为 none、url、linear-gradient、radial-gradient、repeat-linear-gradient、repeat-radial-gradient

目前仅有 Chrome 、Safari 支持，且需要加 -webkit- 前缀

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

备注