css中怎样把矩形变为椭圆形

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,我们可以使用border-radius属性来将一个矩形变成椭圆形。代码示例: border-radius: 50%; 上述代码将会将矩形的边角变成圆角,但如果我们将border-radiu

在CSS中,我们可以使用border-radius属性来将一个矩形变成椭圆形。

代码示例:
border-radius: 50%; 

上述代码将会将矩形的边角变成圆角,但如果我们将border-radius设置为50%时,边角就变成了椭圆。

代码示例:
border-radius: 50% / 100%;
或
border-radius: 100% 50%; 

如果想让上下两个角变成椭圆,而左右两个角仍然是直角,我们可以使用border-top-left-radius和border-top-right-radius属性来分别设置上左和上右两个角。

代码示例:
border-top-left-radius: 50% 75%;
border-top-right-radius: 50% 75%; 

上面的示例中,第一个值是椭圆的横轴半径,第二个值是纵轴半径。因此,我们可以根据具体需求来调整这两个值,来让椭圆的形态更加接近我们所期望的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎样把矩形变为椭圆形

粉丝

0

关注

0

收藏

0

已有0次打赏