这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

shape-outside CSS 属性定义了一个行内内容应该包裹的形状。默认表现是行内元素包裹该形状的margin box。

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> 值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

初始值none
适用元素floats
是否是继承属性
适用媒体visual
计算值as defined for basic-shape (with shape-box following, if supplied), the image with its URI made absolute, otherwise as specified.
Animation typeyes, as specified for basic-shape, otherwise no
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

shape-outside 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容(浮动元素)所包裹的形状。

none
该浮动区域不产生影响,行内元素以默认的方式包裹着该元素的margin box。
<shape-box>
根据浮动元素的边缘(通过 CSS box model 来定义)形状计算出浮动的区域。可能是 margin-box, border-box, padding-box, 或者 content-box。这个形状包括了由 border-radius 属性制造出来的弧度(与 background-clip 的表现类似)。
margin-box
定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的border-radiusmargin 的值决定。如果 border-radius / margin 的比率大于等于 1 , 那么这个 margin box 的角的弧度就是 border-radius + margin ;如果比率小于 1,那么这个 margin box 的角的弧度就是 border-radius + (margin * (1 + (ratio-1)^3)) 。
border-box

定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。

padding-box

定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。

content-box

定义一个由内容区域的外边缘封闭形成的形状(译者:表述的不太好,就是被padding包裹的区域,在chrome控制台中的盒子模型图中的蓝色区域。)。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。

<basic-shape>
基于 inset()circle()ellipse(), 或者 polygon()其中一个创造出来的形状计算出浮动区域。如果同时存在 <shape-box> ,那么会为 <basic-shape> 方法定义一个参考盒,这个参考盒默认为 margin-box 。
<image>
提取并且计算指定 <image> 的alpha通道得出浮动区域(译者:即根据图片的非透明区域进行包裹)。就跟通过 shape-image-threshold来定义一样。
Note: 用户代理 必须使用由HTML5规范定义的CORS-enabled fetch方法来处理 shape-outside 的值中的所有URL。当捕获的时候,用户代理必须使用“匿名”模式来设置层叠样式表的URL的 referrer source 和设置所在文档的URL的 origin 。如果这导致出现没有有效的备份图像这样的网络错误, 产生的影响就跟指定了值 none 一样。

格式化语法

none | <shape-box> || <basic-shape> | <image>

where
<shape-box> = <box> | margin-box
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

where
<box> = border-box | padding-box | content-box
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

Interpolation

当在两个  <basic-shape> 之间产生动画时,将会应用以下规则。shape 里的值将会被当成一个简单列表插入。插入列表的值的类型可能是 <length><percentage>,或 calc()。如果列表的值不是以上的几种类型,但是都相同的话(如在两个列表的相同位置找到了 nonzero ),那些值会插入到列表中。

  • 两个形状必须使用同样的参考盒。
  • 如果两个形状都是 ellipse() 或 circle()类型,并且它们的 radii 都没有使用 closest-side 或 farthest-side 关键字,则将两个形状对应值之间的值插入到 shape 方法中。
  • 如果两个形状的类型都是 inset(),则将两个形状对应值之间的值插入到 shape 方法中。
  • 如果两个形状都是 polygon(), 两个多边形之间有相同的定点数量并且 <fill-rule> 相同,则将两个形状对应值之间的值插入到 shape 方法中。
  • 其余所有情况都不会发生插入。

例子

HTML

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be
    funneling your attention towards a spot on the page
    to drive you to follow a particular link. Sometimes
    you don't notice.
  </p>
</div>

CSS

.main {
  width: 500px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Result

规范

Specification Status Comment
CSS Shapes Module Level 1
shape-outside
Candidate Recommendation Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 37 未实现[1][4] 未实现 24 8.0 -webkit
<gradient> ? 未实现 未实现 ? ?
inset() ? 未实现[2] 未实现 ? ?
polygon() ? 未实现[3] 未实现 ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 未实现 未实现[1][4] 未实现 未实现 8.0 -webkit
<gradient> 未实现 未实现 未实现 未实现 ?
inset() 未实现 未实现[2] 未实现 未实现 ?
polygon() 未实现 未实现[3] 未实现 ? ?

[1] This feature is implemented behind the preference layout.css.shape-outside.enabled, defaulting to false, since Gecko 53.0 (Firefox 53 / Thunderbird 53 / SeaMonkey 2.50), currently only supporting <shape-box> values (see bug 1309467), circle() (see bug 1311244), and ellipse() (see bug 1326406). See bug 1098939 for the general implementation of shape-outside.

[2] Since Gecko 54.0, inset() values have also been supported in Gecko, albeit behind the layout.css.shape-outside.enabled preference.

[3] Since Gecko 55.0, polygon() values have also been supported in Gecko, albeit behind the layout.css.shape-outside.enabled preference.

[4] shape-outside is now animatable (bug 1289049).

See also

文档标签和贡献者

标签: 
此页面的贡献者: xgqfrms-GitHub, Ahhaha233
最后编辑者: xgqfrms-GitHub,