CSS Shapes 简介 #4957

xilihuasi · 2019-01-06T12:51:52Z

译文翻译完成，resolve #4911

initial commit

finish translate

EquinoxHzXu · 2019-01-07T09:24:09Z

校对认领

fanyijihua · 2019-01-07T09:24:10Z

@ElizurHz 好的呢 🍺

EquinoxHzXu · 2019-01-07T09:25:04Z

TODO1/an-introduction-to-css-shapes.md


-CSS Shapes allow us to define geometric shapes that text can flow around. These shapes can be circles, ellipses, simple or complex polygons, and even images and gradients. A few practical design applications of Shapes might be displaying circular text around a circular avatar, displaying text over the simple part of a full-width background image, and displaying text flowing around drop caps in an article.
+CSS Shaptes 允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至图像和渐变。Shapes 的一些实际设计应用可能是圆形头像周围显示圆形环绕文本，全屏背景图片的简单部位上面展示文本，以及在文章中显示首字下沉。


Shaptes => Shapes

EquinoxHzXu · 2019-01-07T09:27:26Z

TODO1/an-introduction-to-css-shapes.md


-The current implementation of CSS Shapes is [CSS Shapes Module Level 1](https://drafts.csswg.org/css-shapes/), which mostly revolves around the `[shape-outside](https://tympanus.net/codrops/css_reference/shape-outside/)` property. `shape-outside` defines a shape that text can flow around.
+CSS Shapes 的当前实现是 [CSS Shapes 模块 1 级](https://drafts.csswg.org/css-shapes/)，它主要包含 `[shape-outside](https://tympanus.net/codrops/css_reference/shape-outside/)` 属性。`shape-outside` 定义了文本环绕的形状。


CSS Shapes Module Level 1 建议保留英文原文，翻译出来感觉略怪

EquinoxHzXu · 2019-01-07T09:28:28Z

TODO1/an-introduction-to-css-shapes.md


-Considering there is a `shape-outside` property, you might assume there is a corresponding `shape-inside` property that would contain text within a shape. A `shape-inside` property might become a reality in the future, but it is currently a draft in [CSS Shapes Module Level 2](https://drafts.csswg.org/css-shapes-2/), and is not implemented by any browser.
+考虑到有 `shape-outside` 属性，你可能会想到还有一个相应的 `shape-inside` 属性，它包含形状内的文本。`shape-inside` 属性可能会在将来实现，目前它只是 [CSS Shapes 模块 2 级](https://drafts.csswg.org/css-shapes-2/)里面的一个草案，并没有被任何浏览器实现。


CSS Shapes Module Level 2 建议保留英文原文，翻译出来感觉略怪

EquinoxHzXu · 2019-01-07T09:33:23Z

TODO1/an-introduction-to-css-shapes.md

-The `circle()` function takes an optional parameter of radius. In our case, the default radius (_r_) is `50%`, or `100px`. Using `circle(50%)` or `circle(100px)` would produce the same result as what we’ve already done.  
-You might notice the text is right up against the shape. We can use the [`shape-margin`](https://tympanus.net/codrops/css_reference/shape-margin/) property to add a margin to the shape, which can be set in `px`, `em`, `%`, and any other standard CSS unit of measurement.
+`circle()` 函数接收可选的 radius 参数。在本例中，默认 radius 是 `50%` 或者 `100px`。使用 `circle(50%)` 或者 `circle(100px)` 都将产生和我们已经完成样例的同样结果。
+


多了一个空行

原文是两个段落，这里需换行，不然会合成一段

EquinoxHzXu · 2019-01-07T09:39:11Z

TODO1/an-introduction-to-css-shapes.md


 ![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/cssshapes_ellipse1.jpg)

-The difference between an `ellipse()` and a `circle()` is that an ellipse has two radii – _r_x and _r_y, or the X-axis radius and Y-axis radius. Therefore, the above example can also be written as:
+`ellipse()` 和 `circle()` 的区别在于椭圆有两个 radii —— _r_x 和 _r_y，或者 X-axis radius 和 Y-axis radius。因此，上面的例子也可以写成：


radii: radius 的复数

ellipse() 和 circle() 的区别在于椭圆有两个 radii —— _r_x 和 _r_y，或者 X-axis radius 和 Y-axis radius。 =>
ellipse()和circle()` 的区别在于椭圆有两个半径 —— _r_x 和 _r_y，或者 X 轴半径和 Y 轴半径。

EquinoxHzXu · 2019-01-07T09:39:24Z

TODO1/an-introduction-to-css-shapes.md


 ```
 ellipse(75px 150px);
 ```

-The position parameters are the same for circles and ellipses. The radii, in addition to being a unit of measurement, also include the options of `farthest-side` and `closest-side`.
+circles 和 ellipses 的位置参数是一样的。除了是测量单位，radii 也包括 `farthest-side` 和 `closest-side` 的选项。


radii: radius 的复数

Moonliujk · 2019-01-07T11:20:54Z

@leviding 校对认领

fanyijihua · 2019-01-07T11:20:57Z

@Moonliujk 妥妥哒 🍻

Moonliujk

翻译的不错，一些小的错误指出希望译者注意一下。

Moonliujk · 2019-01-07T11:58:38Z

TODO1/an-introduction-to-css-shapes.md

-You might notice the text is right up against the shape. We can use the [`shape-margin`](https://tympanus.net/codrops/css_reference/shape-margin/) property to add a margin to the shape, which can be set in `px`, `em`, `%`, and any other standard CSS unit of measurement.
+`circle()` 函数接收可选的 radius 参数。在本例中，默认 radius 是 `50%` 或者 `100px`。使用 `circle(50%)` 或者 `circle(100px)` 都将产生和我们已经完成样例的同样结果。
+
+你可能注意到文本刚好和形状贴合。我们可以使用 [`shape-margin`](https://tympanus.net/codrops/css_reference/shape-margin/) 属性给形状添加 margin，单位可以是 `px`、`em`、`%` 和其他标准的CSS测量单位。


CSS 前后需要添加空格

Moonliujk · 2019-01-07T11:59:34Z

TODO1/an-introduction-to-css-shapes.md


-Now that CSS Shapes have gained widespread support across modern browsers, it’s worth taking a look into the flexibility and functionality they provide to see if they might make sense in your next design project.
+现在 CSS Shapes 已经获得了现代浏览器的广泛支持，值得一看的是它们提供的灵活性和功能，以确定它们在您的下一个设计项目中是否有意义。


以确定它们在您的下一个设计项目中是否有意义。
=》
以确定它们在你的下一个设计项目中是否有意义。
与后文翻译统一一下，都翻译你比较好

Moonliujk · 2019-01-07T12:14:30Z

TODO1/an-introduction-to-css-shapes.md

@@ -184,9 +185,9 @@ ellipse(farthest-side closest-side at 25% 25%)

 ![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/cssshapes_ellipse3.jpg)

-### Inset
+### 插入


插入
=》
内嵌
前后译文保持统一

Moonliujk · 2019-01-07T12:27:39Z

TODO1/an-introduction-to-css-shapes.md

@@ -337,15 +338,15 @@ Unlike in the other examples, we’re going to use an `img` tag instead of a `di

 ![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/cssshapes_image1.jpg)

-Since the image I used was a star with a transparent background, the text knew which areas were transparent and which were opaque, and aligned itself accordingly.
+因为我使用了透明背景的星星图像，文本知道哪些区域是透明的哪些是不透明的，并相应地调整自己。


并相应地调整自己
=》
并进行自适应地布局。
稍微调整了一下，仅供参考

Moonliujk · 2019-01-07T12:30:54Z

TODO1/an-introduction-to-css-shapes.md

@@ -365,13 +366,13 @@ I’m going to make a gradient example that’s a 50%/50% split of a color and t

 ![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2018/11/cssshapes_gradient1.jpg)

-We can see the gradient is perfectly split diagonally at the center of opaque and transparent.
+我们可以看到渐变在不透明和透明的中心对角线完美分割


末尾需要添加句号

Moonliujk · 2019-01-07T12:32:03Z

@xilihuasi @leviding 校对完成

leviding · 2019-01-08T12:50:10Z

@xilihuasi 可以修改啦~

根据校对者意见修改

xilihuasi · 2019-01-08T15:16:01Z

@leviding 根据校对者意见修改完成
@ElizurHz @Moonliujk 感谢两位校对，辛苦~
PS：刚看了下介绍四个形状函数的标题，例如 circle 直接翻译”圆“”感觉有些别扭，不翻或者翻译成“圆（circle）”会不会好点？

leviding · 2019-01-09T09:32:23Z

@xilihuasi 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

xilihuasi added 5 commits January 3, 2019 23:24

Update an-introduction-to-css-shapes.md

21523a7

initial commit

Update an-introduction-to-css-shapes.md

22324df

Update an-introduction-to-css-shapes.md

3d35214

Update an-introduction-to-css-shapes.md

49dc42d

Update an-introduction-to-css-shapes.md

1ff9954

finish translate

fanyijihua added the 校对认领 label Jan 6, 2019

fanyijihua mentioned this pull request Jan 6, 2019

CSS Shapes 简介 #4911

Closed

leviding added the 前端 label Jan 6, 2019

fanyijihua added the 正在校对 label Jan 7, 2019

EquinoxHzXu reviewed Jan 7, 2019

View reviewed changes

fanyijihua removed the 校对认领 label Jan 7, 2019

Moonliujk reviewed Jan 7, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label Jan 8, 2019

Update an-introduction-to-css-shapes.md

f269ae0

根据校对者意见修改

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels Jan 9, 2019

Update an-introduction-to-css-shapes.md

0d5fd29

leviding approved these changes Jan 9, 2019

View reviewed changes

leviding merged commit b2e185d into xitu:master Jan 9, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Jan 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Shapes 简介 #4957

CSS Shapes 简介 #4957

xilihuasi commented Jan 6, 2019

EquinoxHzXu commented Jan 7, 2019

fanyijihua commented Jan 7, 2019

EquinoxHzXu Jan 7, 2019

EquinoxHzXu Jan 7, 2019

EquinoxHzXu Jan 7, 2019

EquinoxHzXu Jan 7, 2019

xilihuasi Jan 8, 2019

EquinoxHzXu Jan 7, 2019

EquinoxHzXu Jan 7, 2019

Moonliujk commented Jan 7, 2019

fanyijihua commented Jan 7, 2019

Moonliujk left a comment

Moonliujk Jan 7, 2019

Moonliujk Jan 7, 2019

Moonliujk Jan 7, 2019

Moonliujk Jan 7, 2019

Moonliujk Jan 7, 2019

Moonliujk commented Jan 7, 2019

leviding commented Jan 8, 2019

xilihuasi commented Jan 8, 2019

leviding commented Jan 9, 2019


		CSS Shapes allow us to define geometric shapes that text can flow around. These shapes can be circles, ellipses, simple or complex polygons, and even images and gradients. A few practical design applications of Shapes might be displaying circular text around a circular avatar, displaying text over the simple part of a full-width background image, and displaying text flowing around drop caps in an article.
		CSS Shaptes 允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至图像和渐变。Shapes 的一些实际设计应用可能是圆形头像周围显示圆形环绕文本，全屏背景图片的简单部位上面展示文本，以及在文章中显示首字下沉。


		The current implementation of CSS Shapes is [CSS Shapes Module Level 1](https://drafts.csswg.org/css-shapes/), which mostly revolves around the `[shape-outside](https://tympanus.net/codrops/css_reference/shape-outside/)` property. `shape-outside` defines a shape that text can flow around.
		CSS Shapes 的当前实现是 [CSS Shapes 模块 1 级](https://drafts.csswg.org/css-shapes/)，它主要包含 `[shape-outside](https://tympanus.net/codrops/css_reference/shape-outside/)` 属性。`shape-outside` 定义了文本环绕的形状。


		Considering there is a `shape-outside` property, you might assume there is a corresponding `shape-inside` property that would contain text within a shape. A `shape-inside` property might become a reality in the future, but it is currently a draft in [CSS Shapes Module Level 2](https://drafts.csswg.org/css-shapes-2/), and is not implemented by any browser.
		考虑到有 `shape-outside` 属性，你可能会想到还有一个相应的 `shape-inside` 属性，它包含形状内的文本。`shape-inside` 属性可能会在将来实现，目前它只是 [CSS Shapes 模块 2 级](https://drafts.csswg.org/css-shapes-2/)里面的一个草案，并没有被任何浏览器实现。


		Now that CSS Shapes have gained widespread support across modern browsers, it’s worth taking a look into the flexibility and functionality they provide to see if they might make sense in your next design project.
		现在 CSS Shapes 已经获得了现代浏览器的广泛支持，值得一看的是它们提供的灵活性和功能，以确定它们在您的下一个设计项目中是否有意义。

CSS Shapes 简介 #4957

CSS Shapes 简介 #4957

Conversation

xilihuasi commented Jan 6, 2019

EquinoxHzXu commented Jan 7, 2019

fanyijihua commented Jan 7, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Moonliujk commented Jan 7, 2019

fanyijihua commented Jan 7, 2019

Moonliujk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Moonliujk commented Jan 7, 2019

leviding commented Jan 8, 2019

xilihuasi commented Jan 8, 2019

leviding commented Jan 9, 2019