DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
CSS shape-margin
属性为使用 shape-outside
属性创建的 CSS 形状添加边距。
它的作用有点像 shape-image-threshold
,因为它会改变 CSS 形状与其周围内容之间的距离,但它不会使用不透明度值将半透明像素包含在浮动区域中,shape-margin
— 顾名思义 — 定义了 CSS 形状的浮动区域与其周围浮动内容之间的空间。
shape-margin
不单独使用,而是与 shape-outside
协同工作,为定义的 CSS 形状添加边距,该 CSS 形状设置了浮动区域。
语法
shape-margin: <length> | <percentage>
- 初始值:
0
- 应用于: 浮动
- 继承: 否
- 动画类型: 长度、百分比或计算
值
shape-margin
属性接受包含数值长度、百分比或使用 calc()
函数计算的值。
/* Length values */
shape-margin: 25px;
shape-margin: 2.5em;
/* Percentage values */
shape-margin: 25%;
/* Calculated values */
shape-margin: calc(100% - 2vw);
/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;
请注意,百分比值指的是包含声明该属性的元素的元素的宽度。
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 62+ | 37+ | 10.1+ | 24+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mini |
---|---|---|---|---|
84+ | 68+ | 81+ | 10.3 | 全部 |