實現方法：

先畫一個外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描邊border:2px solid #789cb6;
加陰影box-shadow: 5px 5px 7px #999;
給該死的firefox3私有屬性-moz-border-radius: 120px;

?

再畫一個小圈，width: 230px; height: 230px;border-radius: 115px;
定位，position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
給該死的firefox3私有屬性-moz-border-radius: 115px;

?

?

扔一個大白方塊進去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;

?

再扔一個白方塊進去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一點的藍色描邊border:25px solid #3b99e3;

?

最終效果圖如下：

?

轉載于:https://www.cnblogs.com/jcomet/archive/2012/02/22/2363909.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的用css3写遨游的logo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。