banzhiyan1828 2015-07-30 10:20 采纳率: 20%
浏览 1701
已采纳

这样一个布局如何用HTML5和CSS3来显示？

图片说明

  • 写回答

4条回答 默认 最新

  • Go 旅城通票 2015-07-30 12:37
    关注

    border-radius变为圆形，2个圆形嵌套

     <!doctype html>
<style>
body{background:#ccc}
div.line{height:30px;background:#000;position:relative}
div.line div{-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-khtml-border-radius:30px;background:#000;position:absolute;width:60px;height:60px;left:50%;margin-left:-30px;bottom:0}
div.line div.orange{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-khtml-border-radius:20px;background-color:orange;width:40px;height:40px;left:50%;margin-left:-20px;bottom:10px}
</style><br /><br /><br />
<div class="line">
    <div></div>
    <div class="orange"></div>
</div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料