css实现椭圆
先实现个简单点的,用css实现一个圆,ok,直接上代码:
.circle{
width: 100px;
height:100px;
background: red;
border-radius: 50%;
}
实现椭圆的方法
1.利用css3变形
.circle{
width: 100px;
height:100px;
background: red;
border-radius: 50%;
transform: scale(1,0.5);
}
效果如下
2.直接改变高度
.circle{
width: 100px;
height:50px;
background: red;
border-radius: 50%;
}
效果如下
3.利用border-radius属性
.circle{
width: 100px;
height:100px;
background: red;
border-top-left-radius:100px 50px;
border-top-right-radius:100px 50px;
border-bottom-left-radius:100px 50px;
border-bottom-right-radius:100px 50px;
}
效果如下
但是这样实现的效果还不是椭圆,还要再把高度设置为宽度的一半,所以还是直接用第二种方法比较简便
参考
人生如逆旅,我亦是行人
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步