深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › css教程 › css3椭圆或半椭圆特效制作
返回列表 发新帖
查看: 444|回复: 0

css3椭圆或半椭圆特效制作

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2023-1-4 10:05:10 | 444 | 0 | 显示全部楼层 |阅读模式
admin 2023-1-4 10:05:10 444 0 显示全部楼层
css3椭圆或半椭圆特效制作

然后通过border-radius属性来设置圆角，在ellipse属性里添加：border-radius:100%; 即可设置椭圆。



为了兼容各种浏览器我们在这里还要添加

  1. -o-border-radius:100%;
  2. -ms-border-radius:100%;
  3. -moz-border-radius:100%;
  4. -webkit-border-radius:100%;
复制代码
案例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css制作椭圆</title>
  6. <style>
  7. .ellipse{
  8. width: 200px;
  9. height: 100px;
  10. background-color: red;
  11. border-radius:100%;
  12. -o-border-radius:100%;
  13. -ms-border-radius:100%;
  14. -moz-border-radius:100%;
  15. -webkit-border-radius:100%;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="ellipse"></div>
  21. </body>
  22. </html>
复制代码
输出结果界面如下：

css3椭圆或半椭圆特效制作

css3椭圆或半椭圆特效制作


网站建设, css3教程, css特效
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表