学习用css3画博客网站logo图标

CSS样式表：

.y { width: 160px; height: 200px; position: relative; /* relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级 */ }
/* after 伪元素在元素之前添加内容*/

.y:before { content: " "; width: 60px; height: 120px; background: #333; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); /* skew 逆时针倾斜*/ position: absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */ left: 20px; top: 10px }
/* after 伪元素在元素之后添加内容*/

.y:after { content: " "; width: 60px; height: 120px; background: #333; position: absolute; left: -2px; top: 130px; }
.a:before { content: " "; width: 60px; height: 240px; background: #333; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); position: absolute; left: 150px; top: 20px }
.a:after { content: " "; width: 60px; height: 240px; background: #333; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); position: absolute; left: 270px; top: 20px }
.n:before { content: " "; width: 60px; height: 240px; background: #333; position: absolute; left: 400px; top: 20px }
.n:after { content: " "; width: 60px; height: 240px; background: #333; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); position: absolute; left: 470px; top: 20px }
.n1 { content: " "; width: 60px; height: 240px; background: #333; position: absolute; left: 540px; top: 20px }
.g:before { content: " "; width: 250px; height: 250px; -moz-border-radius: 125px; -webkit-border-radius: 125px; border-radius: 125px; /* radius 圆半径 */ background: #333; position: absolute; left: 650px; top: 20px }
.g:after { content: " "; width: 160px; height: 160px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 80px; background: #fff; position: absolute; left: 700px; top: 67px }
.g1:after { content: " "; width: 100px; height: 140px; background: #fff; position: absolute; left: 810px; top: 75px }
.g2:before { content: " "; width: 110px; height: 50px; background: #333; position: absolute; left: 769px; top: 115px }
.g2:after { content: " "; width: 57px; height: 80px; background: #333; position: absolute; left: 822px; top: 135px }
/* after 伪元素在元素之前添加内容*/

.heart:before { content: " "; border-radius: 80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ width: 160px; height: 240px;/* 长方形 */ background: #e15782; -moz-transform: rotate(-45deg);/* 逆时针旋转45°*/ -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */ left: 940px; top: 20px }
.heart:after { content: " "; border-radius: 80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ width: 160px; height: 240px;/* 长方形 */ background: #e15782; -moz-transform: rotate(45deg);/* 顺时针旋转45°*/ -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */ left: 998px; top: 20px }