开发工具与关键技术:DW border-radius属性
作者:Mr_肖先生
撰写时间:2019年2月18日
这是在今天写css3时碰到的,想要弄个微笑的表情却不知如何下手,然后想到了border-radius设置圆角,试了很久还是弄不出来,最后发现了border-radius的一个新的写法,话不多说,看例子:
<div class="div1">
<div class="div2"></div>
<div class="div3"><div class="div5"></div></div>
<div class="div4"><div class="div6"></div></div>
</div>
.div1{
position: relative;
width: 300px;
height: 200px;
background: red;
border-radius: 75% 75% 75% 75%;
}
.div2{
width: 100px;
height: 20px;
position: absolute;
bottom: 20px;
left: 95px;
border: 2px solid black;
border-radius: 0 0 50% 50%/0 0 100% 100% ;/*如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。*/
border-top: none;
animation: div2 2s infinite;
}
.div3{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 95px;
background: #fff;
}
.div4{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 20px;
right: 95px;
background: #fff;
}
.div5,.div6{
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
top: 20px;
right: 15px;
background: #000;
animation: div 2s infinite;
}
@keyframes div{
0%{
transform: translateY(-5px);
}
100%{
transform: translateY(-15px);
}
}
@keyframes div2{
0%{
border: 2px solid black;
border-radius: 0 0 50% 50%/0 0 100% 100% ;
border-top: none;
}
100%{
border: 2px solid black;
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
}
这里就是一些基本样式与布局,其中重点是border-radius后面设置的值,我们知道border-radius是一种缩写方法。上右下左是常规操作,这里是不是发现我设置了第一个值后斜杆又设一个值呢,这也是我今天刚发现的写法,如果“/”前后的值都存在,那么“/”前面的值设置的是其水平半径,“/”后面值设置的是其垂直半径。这样我们就能设置出一条半圆弧线。如有错误,欢迎指正。效果如下: