.
box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-
radius: 50px 100px;
}
三个参数
设置三个参数时,第一个参数代表:左上,第二个参数代表:右上、左下,第三个参数代表:右下。
<div class="box">
.
box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-
radius: 50px 100px 20px;
}
四个参数
设置四个参数时,第一个参数代表:左上,第二个参数代表:右上,第三个参数代表:右下css加圆角css加圆角,第四个参数代表左下。
<div class="box">
.
box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-
radius: 20px 60px 100px 200px;
}
其他书写方式
除了前面的固定写法之外,还有一种比较少见的写法,就是中间用斜线/隔开。 这种写法可以控制固定边的圆角。 斜杠左右两边可以写四个参数。
左边四个参数
左边的四个参数分别代表左右两侧的上半部分和下半部分的圆角。
<div class="box">
.
box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-
radius: 20px 40px 60px 80px / 10px;
}
右边四个参数
<div class="box">
.
box{
width: 300px;
height: 300px;
border: 2px solid aqua;
border-
radius: 20px / 40px 60px 80px 100px;
}
如果这里还有人不明白的话,那我就只能使用终极杀招了。
还支持一、二、三、四、四参数写入方式。 我这里就不详细说了。 你可以自己练习一下。
画水滴
准备好我们需要的袋子
<div id="water">
对于你需要的风格(注释是为了解释),我推荐你一个大纲,在这里只使用 cv 。 另外,如果你对box-shadow不太了解,可以查文档看一下。 我这里就不解释了。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
background-color: #c0d12b;
}
#water{
width: 300px;
margin-top: 200px;
height: 300px;
border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 20px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
}
水滴亮点
为水滴添加高亮效果,使显示更加真实。 这里我们可以使用伪元素
#water::after{
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 240px;
left: 48%;
background-color: rgba(255,255,255,0.8);
border-radius: 51% 49% 35% 65% / 40% 54% 46% 60% ;
animation: move 5s linear infinite alternate;
}
#water::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
top: 265px;
left: 47%;
background-color: rgba(255,255,255,0.8);
border-radius:51% 49% 35% 65% / 59% 54% 46% 41% ;
}
水滴动画
最后添加水滴的动画
#water{
width: 300px;
margin-top: 200px;
height: 300px;
border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;
box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),
10px 10px 20px rgba(0,0,0,0.3),
15px 20px 30px rgba(0,0,0,0.05),
inset -10px -10px 15px rgba(255,255,255,0.8);
animation: move 4s linear infinite alternate;
}
@keyframes move{
25%{
border-radius: 32% 68% 34% 66% / 44% 18% 82% 56% ;
}
50%{
border-radius:38% 62% 21% 79% / 56% 59% 41% 44% ;
}
100%{
border-radius: 42% 58% 66% 34% / 38% 82% 18% 62% ;
}
}
完整代码
所有代码均在鹈鹕上 代码在鹈鹕上
结尾
如果你这里还学会了border-radius,请私信我,我手把手教你,不信还是没有办法
返回顶部
发表评论