border-radius属性设置半圆弧线

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