shape-margin

Avatar of Geoff Graham
Geoff Graham

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;

请注意,百分比值指的是包含声明该属性的元素的元素的宽度。

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+62+37+10.1+24+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mini
84+68+81+10.3全部
来源:caniuse