关于border-radius

关于border-radius

border-radius: 52px / 0 0 36px 3px;

这个出来的效果为什么是水平方向不会变圆?

我理解解的是左上角水平方向到52px产生圆角,垂直方向0。那应该是垂直方向不会变才对,为什么页面显示出来水平方向不会产生圆角效果?

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

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

2回答
好帮手慕粉 2020-03-04 16:11:51

同学你好,如果其中一个方向上不设置的话,就不会有圆角,必须要两个方向都有值才有效果。同学可以自己写代码尝试一下,看下效果。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

好帮手慕粉 2020-03-04 15:10:12

同学你好,关于同学的问题解答如下:

1、border-radius属性一个角分为水平方向和垂直方向,例如:

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

效果:

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

所以当使用boder-radius属性合在一起写的时候,一个角的两个方向都包括了。如果要设置不一样的值,需要用/隔开。顺序为左上角-右上角-右下角-左下角 ,例如:

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

/前面的第一个值和/后面的第一个值是一组,后面以此类推。

2、另外:border-radius:52px/ 0px 0px 36px 36px;也可以写成border-radius:52px 52px 52px 52px/ 0px 0px 36px 36px;当值一样的时候可以省略,所以水平方向只写了一个52px。这里的52px代表的是水平方向的值。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 艾丶 #1
    52px既然代表的是水平方向的值,那么为什么水平方向还是直线呢?还是有点不明白
    2020-03-04 15:12:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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