神奇的CSS用法之 border-radius
·
Yin灏
boder-radius
border-radius
:设置元素的圆角属性,可以设置百分比也可以设置像素单位
- 一个参数
设置一个参数的时候代表四个角的圆角属性
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px;
}
- 两个参数
设置两个参数的时候,第一个参数代表:左上、右下 ,第二个参数代表:右上、左下
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px 100px;
}
- 三个参数
设置三个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上、左下,第三个代表:右下
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 50px 100px 20px;
}
- 四个参数
设置四个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上,第三个代表:右下,第四个参数代表左下
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px 60px 100px 200px;
}
- 其它写法
除了上面的固定的写法还有一种比较少见的写法那就是中间用斜杠 / 分割开来,这种写法可以控制固定边的圆角, 斜杠左右都可以写四个参数
- 左侧四个参数
左侧四个参数分别代表上下两条边左右的上部分,下部分圆角
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px 40px 60px 80px / 10px;
}
- 右侧四个参数
<div class="box"></div>
.box {
width: 300px;
height: 300px;
border: 2px solid aqua;
border-radius: 20px / 40px 60px 80px 100px;
}
到这里如果还有人不懂,那我只能放出究极大招了
同样都是支持一,二,三,四,四个参数写法,这里就不赘述了,大家自行去实践
绘制水滴
准备我们需要的盒子
<div id="water"></div>
需要的样式 (注释有解释作用),给大家推荐一个绘制水滴形状的网站在这里直接 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: 1px solid #000; */
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-right: 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%;
}
}