CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等
新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的部分用法,在此总结一下,以供需要的朋友们,总共30个例子
- 长方形
#Rectangle{
width: 200px;
height: 50px;
background-color: red;
color: white;
text-align: center;
}
- 正方形
#square{
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
}
- 实心圆
#perfect-circle{
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
border-radius: 100px;
/*-webkit-border-radius: 100px;*/
-moz-border-radius: 100px;
}
- 圈
#circle{
width: 200px;
height: 200px;
background-color: white;
color: black;
text-align: center;
border-radius: 100px;
/*-webkit-border-radius: 10px;*/
/*-moz-border-radius: 100px;*/
border:3px red solid;
}
- 椭圆
#ellipse{
width: 200px;
height: 100px;
background-color: red;
color: white;text-align: center;
border-radius: 100px/50px;
/*-webkit-border-radius: 100px/50px;*/
/*-moz-border-radius: 100px/50px;*/
}
- 上三角
#triangle-up {
width: 0px;
height: 0px;
color: white;
text-align: center;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
/*-webkit-border-top-left-radius: 50px solid transparent;*/
/*-webkit-border-top-right-radius: 50px solid transparent;*/
/*-webkit-border-bottom-left-radius: 100px solid red;*/
/*-webkit-border-bottom-right-radius: 100px solid red;*/
}
- 下三角
#triangle-down{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
- 左三角
#triangle-left{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-top: 50px solid transparent;
bor