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

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