border家族

border-style:dotted solid double dashed（上边框是点状,右边框是实线,下边框是双线,左边框是虚线）边框样式;
border-width(边框宽度);
border-radius(创建圆角);
border-color(边框颜色);
border-shadow(添加阴影);

案例1：太极图

HTML:

<div id="a1"></div>

CSS:

#a1 { width: 96px !important; height: 48px !important; background: #fff; border-color: #E8339B; border-style: solid;border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }

 

#a1:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff;border: 18px solid #E8339B; border-radius: 100%; width: 12px; height: 12px; }

#a1:after { content: ""; position: absolute; top: 50%; left: 50%; background: #E8339B;border: 18px solid #fff; border-radius:100%; width: 12px; height: 12px; }

最终效果：

 案例2：三角

HTML:

<div id="b1"></div>

CSS:

#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}

 

同理，

三角形向下：

#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #d40834;}

三角形right：

#b1 { width: 0;height: 0;border-left: 100px solid #d40834;border-right: 50px solid transparent;border-top: 100px solid #d40834;}

三角形left：

#b1 { width: 0;height: 0;border-left: 50px solid transparent;border-right: 100px solid #d40834;border-top: 100px solid #d40834;}

三角形top left：

#b1 { width: 0;height: 0;   border-top: 100px solid red;border-right: 100px solid transparent;}

三角形top right：

#b1 { width: 0;height: 0;border-left: 100px solid transparent;border-top: 100px solid #d40834;}

三角形bottom right：

#b1 { width: 0;height: 0;border-left: 100px solid transparent;border-bottom: 100px solid #d40834;}

三角形bottom left：

#b1 { width: 0;height: 0;border-right: 100px solid transparent;border-top: 100px solid #d40834;}