PHPIN.NET

 找回密码
 立即注册
查看: 5040|回复: 0

[HTML5/CSS3] CSS3实现底部弧度效果

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2021-3-26 10:54:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
CSS3实现底部弧度效果

伪类实现:

效果图:
图示.png
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>demo</title>
  6. <style type="text/css">
  7. .box { width: 250px; margin: auto; overflow: hidden; }
  8. .home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }
  9. .home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2cbaf9, #04a9f4); }
  10. </style>
  11. </head>
  12. <body>
  13.         <div class="box">
  14.                 <div class="home_top"> demo </div>
  15.         </div>
  16. <script>

  17. </script>
  18. </body>
  19. </html>
复制代码


不需要伪类实现的:

效果图:
图示2.png
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>demo</title>
  6. <style type="text/css">
  7. .box { width: 750px; height: 300px; margin: auto; background: linear-gradient(#2cbaf9, #04a9f4);border-radius: 0 0 30% 30%; text-align: center; line-height: 300px; color:#fff;}
  8. </style>
  9. </head>
  10. <body>
  11.         <div class="box">
  12.                 demo
  13.         </div>
  14. <script>

  15. </script>
  16. </body>
  17. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 14:39

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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