欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > 心得笔记 >

用css3 绘制心形图案

发布时间:2013-11-02  编辑:杨雨个人博客网站   点击:   

源码: .heart{width:160px;height:200px;position:relative; /* relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级 */ } /* after 伪元素在元素之前添加内容*/ .heart:before{ content:" "; border-radius:100px 100px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ width:80px; height:120px;/* 长方形 */ background:#669; -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:20px;} /* after 伪元素在元素之后添加内容*/ .heart:after{ content:" "; width:80px; height:120px; background:#669; border-radius:100px 100px 0 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); position:absolute; left:48px;top:0px; } 本文地址:http://itbyc.com/log/82.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1