css -moz_moz-border-radius(CSS属性)

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-lefttop-rightbottom-rightbottom-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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值