CSS3完美实现iphone电话图标<br>*{margin:0px;padding:0px;}<br>body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}<br>.icon {width : 56px;高さ: 56px;z-index: 10;position: 絶対;left: 50%;top: 50%;margin-left: -28px;margin-top: -28px;<br> -webkit-border-radius: 10px ;<br> -moz-border-radius: 10px;<br> border-radius: 10px;<br> -webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px;<br> -moz-box-shadow: rgba( 0,0,0,0.5) 0 1px 2px;<br> box-shadow: rgba(0,0,0,0.5) 0 1px 2px; <br>}<br>.icon scan {<br> 表示: ブロック;テキスト配置: センター;フォント: ボールド 11 ピクセル/15 ピクセル "Helvetica Neue"、Arial、Helvetica、Geneva、sans-serif;color: #fff;position: 絶対;top: 58px;left: -10px;width: 76px;<br> text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;<br> text-transform: Capitalize;<br>}<br>.i_phone {<br> width: 100%;height : 100%;<br> -webkit-border-radius: 10px;<br> -moz-border-radius: 10px;<br> border-radius: 10px;<br> 位置: 相対;<br> オーバーフロー: 非表示;<br> カーソル: ポインター;<br> 背景:- webkit-linear-gradient(top, #015801, #06f700);<br> 背景:-moz-linear-gradient(top, #015801, #06f700);<br> 背景:-ms-linear-gradient(top, #015801, # 06f700);<br> 背景:-o-linear-gradient(top, #015801, #06f700);<br> 背景:linear-gradient(top, #015801, #06f700);<br> -ms-filter: progid:DXImageTransform.Microsoft. gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0);<br> フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0) ;<br>}</p> <p>.i_phone .bg_angled {<br> -webkit-border-radius: 10px;<br> -moz-border-radius: 10px;<br> border-radius: 10px;<br> width: 125%; <br> 高さ: 125%;<br> 位置: 絶対;<br> 左: -7px;<br> 上: -7px;<br> -webkit-background-size: 4px 4px;<br> -moz-background-size: 4px 4px;<br> -ms-background -サイズ: 4px 4px;<br> -o-背景サイズ: 4px 4px;<br> 背景サイズ: 4px 4px;<br> 背景色: なし;<br> 背景画像: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);<br> 背景画像: -moz-linear-gradient(top, rgba(255 , 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);<br> 背景画像: -ms-linear-gradient(top, rgba( 255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);<br> 背景画像: -o-linear-gradient(top, rgba) (255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);<br> 背景画像: Linear-gradient(top, rgba(255 , 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, 透明 50%, 透明 100%);<br> -webkit-transform: 回転(-45deg);<br> -moz-変換: 回転(-45 度);<br> -ms-transform: 回転(-45 度);<br> -o-transform: 回転(-45 度);<br> 変換: 回転(-45 度);<br>}</p> <p>.i_phone:after{ <br> コンテンツ: '';<br> -webkit-box-shadow: inset #06f700 0 0 2px;<br> -moz-box-shadow: inset #06f700 0 0 2px;<br> box-shadow: inset #06f700 0 0 2px;<br> width : 100%;<br> 高さ: 100%;<br> 位置: 絶対;<br> 表示: ブロック;<br> -webkit-border-radius: 10px;<br> -moz-border-radius: 10px;<br> border-radius: 10px;<br> z-インデックス: 2;<br>}</p> <p>.i_phone:before{<br> コンテンツ: '';<br> 幅: 100%;<br> 高さ: 50%;<br> 位置: 絶対;<br> 表示: ブロック;<br> -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;<br> -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;<br> border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px;<br> 背景: rgba(255,255,255,0.5);<br> z-index: 5;<br> -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;<br> -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;<br> box-shadow: inset rgba(255,255,255,0.5) 0 1px 0;<br>}</p> <p>.i_phone .truba {<br> 位置: 絶対;<br> 上: 7px;<br> 左: 5px;<br> z-index: 1; <br> 幅: 40px;<br> 高さ: 40px;<br> フォント: 太字 40px/40px "Helvetica Neue"、Arial、Helvetica、Geneva、sans-serif !重要;<br> カラー: #f1f5f9;<br> -webkit-transform: 回転(90 度) ;<br> -moz-transform: 回転(90 度);<br> -ms-transform: 回転(90 度);<br> -o-transform: 回転(90 度);<br> 変換: 回転(90 度);<br> text-shadow: rgba(0 ,0,0,0.5) 0 0 2px;<br>}</p> <p>.i_phone .truba:after {<br> content: '';<br> 位置: 絶対;<br> 幅: 12px;<br> 高さ: 10px;<br> 上: 2px;<br> 左: 25px;<br> 背景: #f1f5f9;<br> -webkit-border -半径: 50% / 2px 2px 6px 2px;<br> -moz-border-radius: 50% / 2px 2px 6px 2px;<br> border-radius: 50% / 2px 2px 6px 2px;<br> -webkit-transform: 回転(-57deg) );<br> -moz-transform: 回転(-57 度);<br> -ms-transform: 回転(-57 度);<br> -o-transform: 回転(-57 度);<br> 変換: 回転(-57 度);<br>}</p> <p>.i_phone .truba:before {<br> コンテンツ: '';<br> 位置: 絶対;<br> 幅: 12 ピクセル;<br> 高さ: 10 ピクセル;<br> 上: 24 ピクセル;<br> 左: 4 ピクセル;<br> 背景: #f1f5f9;<br> -webkit-border -半径: 50% / 2px 2px 2px 6px;<br> -moz-border-radius: 50% / 2px 2px 2px 6px;<br> border-radius: 50% / 2px 2px 2px 6px;<br> -webkit-transform: 回転(-25deg) );<br> -moz-transform: 回転(-25 度);<br> -ms-transform: 回転(-25 度);<br> -o-transform: 回転(-25 度);<br> 変換: 回転(-25 度);<br>}</p> <p>.i_phone .truba b {<br>位置:絶対;<br>幅:35px;<br>高さ:4px;<br>上:17px;<br>左:7px;<br>背景:#f1f5f9;<br>境界半径:0 0 5px 5px;<br> - webkit-transform: 回転(-47 度);<br> -moz-transform: 回転(-47 度);<br> -ms-transform: 回転(-47 度);<br> -o-transform: 回転(-47 度);<br> 変換: 回転(-47deg);<br>}<br>http://www.999jiijiu.com/ b> 電話