左半圆与右半圆应该怎么画

左半圆与右半圆应该怎么画

div{
     width:70px; height:30px;
     border:2px #abcdef solid;
     border-radius:15px 0 0 15px;
   }
   为什么画不出左半圆啊,想问下老师问题出在哪里


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
敲着敲着 2019-09-20 14:31:30

width和height值一样就可以

好帮手慕言 2019-09-16 10:25:15

同学你好,使用同学描述的代码测试,效果是下图:

http://img1.sycdn.imooc.com//climg/5d7ef13709110aba01240064.jpg

同学的疑问是箭头所指的线吗?如果是的话,那么是给div元素设置的宽高,出现是很正常的呀。

左侧的圆角是同学设置的,

http://img1.sycdn.imooc.com//climg/5d7ef218099ce8ed04380046.jpg

http://img1.sycdn.imooc.com//climg/5d7ef1ba09287df801460085.jpg

因为右侧上方和右侧下方同学没有设置角度,所以是直角。如果也设置了角度,那么也会有圆角的。

http://img1.sycdn.imooc.com//climg/5d7ef2690922cf6a05260048.jpg

页面效果:

http://img1.sycdn.imooc.com//climg/5d7ef27a09cf48ce01140039.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

好帮手慕言 2019-09-14 18:15:35

同学你好,如果同学想要实现一个左边是圆形的效果,可以参考下方的代码

http://img1.sycdn.imooc.com//climg/5d7cbcf8096a480f05650435.jpg

页面效果:
http://img1.sycdn.imooc.com//climg/5d7cbd1a0955248e01230088.jpg

如果想要整体是一个圆形,可以参考下方的代码:
http://img1.sycdn.imooc.com//climg/5d7cbd5a09f59e5905720433.jpg

页面效果:

http://img1.sycdn.imooc.com//climg/5d7cbd8409faa90e00910108.jpg

线是老师在截图是浏览器的边,不用理会哦。

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 VermouthYan #1
    不是说的浏览器边的线。。。就是左半圆的时候最左边是个半圆,然后紧跟着上下两条线然后才是竖线封口,而上下半圆的时候就像量角器一样,直接圆弧封口
    2019-09-16 09:33:53
好帮手慕言 2019-09-14 12:12:11

同学你好,因为没有同学完整的的代码,请问同学是下方截图中的这种写法吗?

http://img1.sycdn.imooc.com//climg/5d7c65ba090f8ef606010725.jpg

如果是的话,那么是有效果的哦。

http://img1.sycdn.imooc.com//climg/5d7c65e10992016f02110139.jpg

如果不是的话,建议同学把完整的代码粘贴上来,并说明想要实现什么效果,老师帮助排查。

如果是1-3的编程练习,那么可以参考下方:

<!DOCTYPE html>
<html>

<head>
    <title>border-radius</title>
    <style type="text/css">
        /*此处添加代码*/
        div {
            width: 300px;
            height: 300px;
            border: 2px solid #f00;
            border-radius: 20px 10px 60px;
        }
    </style>
</head>

<body>
    <!-- 此处添加代码 -->
    <div></div>
</body>

</html>

祝学习愉快~

  • 提问者 VermouthYan #1
    是这个样子的,我画出来的效果也是这个样子,但是就不像上下半圆是规规矩矩的半圆啊,上下多出来的横线是个什么东西
    2019-09-14 13:57:37
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师