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

1

2

3

4

5

6

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

VermouthYan 2019-09-13

源自：CSS3边框与圆角 1-3 编程练习

2

收起

4回答

敲着敲着 2019-09-20 14:31:30

width和height值一样就可以

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

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

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

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

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

页面效果：

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

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

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

页面效果：

如果想要整体是一个圆形，可以参考下方的代码：

页面效果：

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

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

提问者 VermouthYan #1

不是说的浏览器边的线。。。就是左半圆的时候最左边是个半圆，然后紧跟着上下两条线然后才是竖线封口，而上下半圆的时候就像量角器一样，直接圆弧封口

2019-09-16 09:33:53

好帮手慕言 2019-09-14 12:12:11

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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

相似问题

小圆环怎么画呢

这里圆的半径是多大

border-radius还是无法理解有5个值的，能再详细的解释下么？

椭圆半径的问题

如果要画一个圆呢？也是用这个方法吗？

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号