由张鑫旭大佬的几篇文章
，，，发现了border，border-radius, box-shadow一些特殊用法，由此想到自己做个总结。border
只写一条边
.triangle { width: 100px; border-top: 100px solid red;} 
写border，同时只写一条边
top
.triangle { width: 100px; border: 100px solid black; border-top: 100px solid red;} 
left
.triangle { width: 100px; border: 100px solid black; border-left: 100px solid red;} 
写border，同时写两条边
.triangle { width: 100px; border: 100px solid black; border-top: 100px solid red; border-bottom: 100px solid blue;} 
由此基本可以看出四条边的组成情况，在此基础上就可以做出各种变形。比如，文章中提到的 向下三角， 梯形等
boder-radius
应用一条边
top
.triangle { width: 100px; border: 100px solid black; border-top: 100px solid red; border-radius: 200px 0 0 0;} 
.triangle { width: 50px; height: 50px; border-top: 10px solid red; border-radius: 200px 0 0 0;} 
镂空
.triangle { width: 50px; height: 50px; border: 50px solid black; border-radius: 50px 0 0 0;} 
应用两条边
.triangle { width: 50px; height: 50px; border-top: 10px solid red; border-left: 10px solid yellow; border-radius: 100px;} 
应用四条边
圆环
.triangle { width: 50px; height: 50px; border-top: 10px solid red; border-radius: 100px;} 
border-radius完整结构
border-radius: 1-4 length|% / 1-4 length|%;
“/” 前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径:
鹅蛋
.triangle { width: 50px; height: 50px; background: lightpink; border-bottom: 10px solid blue; border-left: 10px solid yellow; border-right: 10px solid black; border-top: 10px solid red; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;} 
box-shadow
.triangle { width: 50px; height: 50px; background: lightpink; box-shadow: 50px 50px 0 0 purple;} 