CSS透明度的代码:
opacity:0.5
filter:alpha(opacity=50)
background:#000
这个的意思就是在黑色的基础上,透明度是百分五十。
根据你需要的颜色自己选择色值就行了。
1、圆形
#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}
2、椭圆
#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}
3、等边三角
#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}
4、五角星
#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}
5、爱心
#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}
6、倒三角
#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }
1、在电脑上打开Css,然后准备一个空的html结构,在其中放置一个空的div。2、这时需要去除浏览器中一些特有的样式。
3、给这个样式一个宽高,并添加一个背景。
4、最后给样式添加border-radius属性,其值为宽或高的一半。
5、最后运行程序,这样就会在界面中看到一个圆形。