老师怎么做到border-radius这么快实现图案的

来源:2-6 汉克狗的鼻子

_麦当

2019-10-22 23:28:45

我发现老师都是用xxx PX / xxx PX xxx PX xxx PX xxx PX这样的格式写的,我个人理解是 / 后面的部分,数值越大就越圆,数值越小就越尖,但是 / 前面的那个数值的作用不太理解

写回答

1回答

好帮手慕慕子

2019-10-23

同学你好,可以简单的理解为数值越大越圆。 具体的可以参考如下解释

以border-radius:15px/34px 34px 2px 2px这句代码为例

http://img.mukewang.com/climg/5dafba7b0978233306600300.jpg

border-radius属性其实一个角上是有两个值的,一个水平方向,一个垂直方向,示例:

http://img.mukewang.com/climg/5dafba8d09b750ef05250238.jpg

效果图

http://img.mukewang.com/climg/5dafbaab09c12f1102510216.jpg

如果多个方向一起写的话,水平和垂直方向用/隔开, 示例:

http://img.mukewang.com/climg/5dafbaba09ef910106220283.jpg

效果图

http://img.mukewang.com/climg/5dafbac309ca330406500202.jpg

自己可以测试一下, 结合代码实现的效果帮助理解

老师在给同学讲课之前,对这个案例已经做了充分的准备,所以可以快速实现图案哦, 同学不用担心, 在实际工作中,一般会有工作人员提供相关的数据供我们直接使用的哦

如果帮助到了你, 欢迎采纳!

祝学习愉快!


0

0 学习 · 40143 问题

查看课程