这样一个布局如何用HTML5和CSS3来显示?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

小旋风柴进 2016-06-07 10:37:39 1522

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

云服务器登录 云服务器设置
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:29:31

    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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程