Posted on 2012-04-15 16:37
zljpp 閱讀(104)
評論(0) 編輯 收藏
實(shí)現(xiàn)方法：
- 先畫一個(gè)外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描邊border:2px solid #789cb6;
加陰影box-shadow: 5px 5px 7px #999;
給該死的firefox3私有屬性-moz-border-radius: 120px;
- 再畫一個(gè)小圈，width: 230px; height: 230px;border-radius: 115px;
定位，position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
給該死的firefox3私有屬性-moz-border-radius: 115px;
- 扔一個(gè)大白方塊進(jìn)去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px;left:42px;
右上大圓角20像素，其他小圓角border-radius: 3px 20px 3px 3px;
給該死的firefox3私有屬性-moz-border-radius: 3px 20px 3px 3px;
- 再扔一個(gè)白方塊進(jìn)去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一點(diǎn)的藍(lán)色描邊border:25px solid #3b99e3;
最終效果圖如下：