火热的移动互联网让我看到了HTML5,CSS3的伟大前景。
虽然web端对CSS3的支持还有很多兼容性问题,但是我很愿意相信web端越来越富了,越来越生动了。
这是我对他们的学习越来越有兴趣了。
下面是我用CSS3绘制的一个BMW的标志。
浏览器支持:chrome, safari, firefox—————版本越高越支持
运行截图:

代码:
复制代码
<!DOCTYPE html></p>
<p> <html><head></p>
<p> <script type=”text/javascript”>
</script>
<style type=”text/css”>
.wrapper {
width:365px;
height:365px;
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#f3f3f3), to(#f3f3f3));
background:-moz-linear-gradient(0 0 0deg,#f3f3f3 0%,#b0b1b5 50%,#f3f3f3 100%);
border-radius:365px;
border:1px solid #d3d3d3;
}
.wrapper .wrapper1 {
position:relative;
border:1px solid #0f0f0f;
width:351px;
height:351px;
margin-top:7px;
margin-left:7px;
border-radius:351px;
background: -webkit-gradient(linear, 0 0, 50% 100%, from(#aaa), to(#000));
background:-moz-linear-gradient(0 0 -60deg,#aaa 0%, #000 100%);
box-shadow: #000 0px 0px 1px;
}
.wrapper .wrapper1 .text {
color:#fbfbfb;
font-size:72px;
font-weight:bold;
text-shadow:#000 0px 3px 4px;
position:absolute;
font-family:Arial, Helvetica, sans-serif;
}
.wrapper .wrapper1 .text.B {
left: 38px;
top: 42px;
-webkit-transform: rotate(-54deg) scale(1);
/*-moz-transform: rotate | scale | skew | translate ;
-webkit-transform: rotate | scale | skew | translate ;
-o-transform: rotate | scale | skew | translate ;
-ms-transform: rotate | scale | skew | translate ;
transform: rotate | scale | skew | translate ;
*/
-webkit-transform: rotate(-54deg) scaleX(1.5);
-o-transform: rotate(-54deg) scaleX(1.5);
-ms-transform: rotate(-54deg) scaleX(1.5);
transform: rotate(-54deg) scaleX(1.5);
}
.wrapper .wrapper1 .text.M {
left: 148px;
top: -10px;
-webkit-transform:scaleX(1.3);
-o-transform:scaleX(1.3);
-ms-transform:scaleX(1.3);
transform:scaleX(1.3);
}
.wrapper .wrapper1 .text.W {
right: 32px;
top: 42px;
-webkit-transform: rotate(51deg) scaleX(1.1);
-o-transform: rotate(51deg) scaleX(1.1);
-ms-transform: rotate(51deg) scaleX(1.1);
transform: rotate(51deg) scaleX(1.1);
}
.wrapper .wrapper1 .wrapper2 {
position:relative;
width:217px;
height:217px;
margin-top:62.5px;
margin-left:62.5px;
background: -webkit-gradient(linear, 100% 100%, 0 0, from(#fff), to(#818181));
background:-moz-linear-gradient(0 0 90deg,#fff 100%, #818181 0%);










