css -moz

css -moz

moz-border-radius was Gecko’s equivalent to CSS3’s border-radius property, although it differed in a few respects. The shorthand property allowed web developers to specify rounded borders, or rounded backgrounds if no borders have been defined.

moz-border-radius与Gecko等效于CSS3的border-radius属性，尽管它在某些方面有所不同。 简写属性允许Web开发人员指定圆角边框，如果没有定义边框，则可以指定圆角背景。

In Gecko 2.0 moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0.

在Gecko 2.0中， moz-border-radius重命名为border-radius 。 直到Gecko 12.0为止，一直支持-moz-border-radius作为别名。

In order to conform to the CSS3 standard, Gecko 2.0

为了符合CSS3标准，壁虎2.0

changed the handling of values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;

made rounded corners clip content and images (if overflow: visible is not set)

Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

Border-radius

The border-radius property is a shorthand property that can accept up to four values. The values represent (in order,) the top-left, top-right, bottom-right, and bottom-left corners. As is the case with any shorthand properties that use unit values, any omitted values are inherited from existing ones.

You can explicitly target individual corners of an element using the longhand syntax. For example:

.media img {   border-top-left-radius: 20%;   border-top-right-radius: 20%;   border-bottom-right-radius: 20%;   border-bottom-left-radius: 20%; }

You can see clearly why, in most cases, you’ll use the shorthand syntax. Even if you want to target a single corner, it’s much more efficient to do this instead:

改变了 值以符合规范。 您可以指定一个椭圆作为任意大小的元素上的边框，仅使用border-radius：50％;

使圆角剪辑内容和图像(如果溢出：未设置可见)

注意：在Gecko 13.0(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)中删除了对前缀版本(-moz-border-radius)的支持。

边界半径

border-radius属性是一种简写属性，最多可以接受四个值。 这些值代表(按顺序) top-left ， top-right ， bottom-right和bottom-left 。 与使用单位值的任何速记属性一样，任何省略的值都将从现有的值中继承。

您可以使用长期语法显式定位元素的各个角。 例如：

.media img {   border-top-left-radius: 20%;   border-top-right-radius: 20%;   border-bottom-right-radius: 20%;   border-bottom-left-radius: 20%; }

您可以清楚地看到为什么在大多数情况下会使用速记语法。 即使您要瞄准一个角落，也可以这样做更有效：

翻译自: https://www.sitepoint.com/moz-border-radius-css-property/

css -moz