正斜杠/在CSS边框半径语法 [英] Forward slash / in CSS border radius syntax

问题描述

最近我遇到下面的边界半径语法我不知道：

Recently I came across following border radius syntax unknown to me:

.myClass{
    border-radius: 30% / 20%;
}

任何人都可以解释语法。
并且与IE8兼容吗？

Can anyone explain the syntax. And is it compatible with IE8?

推荐答案

从 W3C ：

斜线，那么
之前的值斜杠设置水平半径，斜杠后面的值设置
垂直半径。如果没有斜线，那么值同时设置两个
半径。

If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.

就支持来说，IE8 't支持 border-radius 属性无论你写的语法。有polyfills可用像 CSS3 Pie 如果您想让 border-radius 在IE8上运作。

As far as the support goes, IE8 doesn't support border-radius property be it whatever syntax you write in. There are polyfills available like CSS3 Pie if you want to make border-radius work on IE8.

您可以在 CanIUse 用于跨浏览器的 border-radius 支持。

You can check on CanIUse for border-radius support across browsers.

这篇关于正斜杠/在CSS边框半径语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！