利用CSS3的border-radius属性实现特殊图形。效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<title>特殊图形</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
border: 1px solid red;
margin: 10px 40px;
float: left;
}
div:first-child {
border-radius: 20px/50px;
}
div:nth-child(2) {
border-radius: 20px;
}
div:nth-child(3) {
border-radius: 15px 0;
}
/* 圆形 */
div:nth-child(4) {
border-radius: 50%;
}
div:nth-child(5) {
border-radius: 100px 0;
}
/* 扇形 */
div:nth-child(6) {
border-radius: 200px 0 0 0;
}
/* 半圆 */
div:nth-child(7) {
border-radius: 100px 100px 0 0;
height: 100px;/*高度减半*/
}
/* 半圆 */
div:nth-child(8) {
border-radius: 0 0 100px 100px;
height: 100px;/*高度减半*/
}
/* 椭圆距形 */
div:nth-child(9) {
border-radius: 100px;
height: 100px;
}
/* 椭圆形 */
div:nth-child(10) {
border-radius: 100%;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…
