老师,我的问题是关于border-radius.

老师,我的问题是关于border-radius.

width:60px;
height:10px;
border-radius: 30px / 8px 8px 2px 2px;

在本节的汉克狗案例中,案例老师每次设置border-radius都说宽和高,但又没说清楚。

我的问题是:border-radius和盒子的宽和高是什么关系?

正在回答

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

2回答

你好同学,因为图形还是要靠观察才能去理解。建议同学写一个盒子,慢慢的改变宽高的值,看看有什么规律,什么时候有了明显的变化。这样就能总结它变化的规律,参考如下:

拿课程中老师说的宽度举一个例子,如下

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

两个盒子设置的圆角是一样的,当宽度变大的时候(第二个盒子),会发现圆角的弧度是不一样的。

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

而第二个图形如果想要更圆润的弧形,就要水平的圆角设置为盒子宽度的一半,如下:

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

当然了,实际开发中border-radius都是比较简单的应用,像视频中的这种做法很少涉及到。自己绘制一下简单了解就行。祝学习愉快,望采纳。

随心无憾 2019-07-01 11:48:43

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

   “/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径

  根据水平半径和垂直半径的值,可以形成一个椭圆或者圆形,然后再根据这个去给元素设置圆角的弧度。利用border-radius的完整属性表达方式,可以设置一些个性的圆角样式


  • 提问者 慕斯0469344 #1
    好的,但这和宽和高有什么关系,因为案例每次都说宽是60px,所以border-radius:30px/.......
    2019-07-01 14:53:17
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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