border-radius属性设置半圆弧线

骑猪看日落 2022-03-18 01:28 241阅读 0赞

开发工具与关键技术：DW border-radius属性  
作者：Mr\_肖先生  
撰写时间：2019年2月18日

这是在今天写css3时碰到的，想要弄个微笑的表情却不知如何下手，然后想到了border-radius设置圆角，试了很久还是弄不出来，最后发现了border-radius的一个新的写法，话不多说，看例子：

.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是一种缩写方法。上右下左是常规操作，这里是不是发现我设置了第一个值后斜杆又设一个值呢，这也是我今天刚发现的写法，如果“/”前后的值都存在，那么“/”前面的值设置的是其水平半径，“/”后面值设置的是其垂直半径。这样我们就能设置出一条半圆弧线。如有错误，欢迎指正。效果如下：  
![在这里插入图片描述][20190218174034231.GIF]

[20190218174034231.GIF]: /images/20220318/bf70e6cd5214446db471439203feb04d.png