css魔法系列(6)之自适应椭圆

原创 雨花茶 随笔 css 294阅读 2017-05-24 11:16:20 举报

讲解椭圆之前我们要熟悉一下border-radius这个属性。
border-radius:50%;这样的写法是border-radius:50% / 50%;简写。但是这种写法也不是最完整的。
/左边代表水平方向,右边垂直方向。border-radius:50% 50% 50% 50% / 50% 50% 50% 50%;这才是完整的写法。
都有4个角顺序是左上角顺时针。
html 代码

半椭圆
html 代码

有了上面的半椭圆我们实现四分之一椭圆就简单多了。
border-radius: 100% 0 0 0 / 100% 0 0 0 ;/前后的值一样。我们可以简写成border-radius: 100% 0 0 0;
四分之一椭圆
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复