纯代码css3画图,副标题:画一只猫汤

以前担心Chrome出来后,前端代码愈加复杂,现在却在琢磨这ie9出来后IE678什么时候隐退。

用纯html+css3网页代码画张图,各浏览器视其对css3的支持表现各不一样,其中webkit内核的浏览器最优,ie最次。

css3画图演示地址

点这里查看演示-css3画的小猫

ps:纯代码,无任何图片添加剂,如果你在使用IE6、7、8不妨体验下别的浏览器,以免受惊。Safari下载 chrome下载

css3画图,各个浏览器显示效果对比(仅针对该图)

就我画的这只猫汤的图而言,表现优劣大致为 safari5 > chrome5 > firefox3.6 > opera10.5 > (ie9 preview) ≥ sougou2.0 > ie8 > ie7 > ie6。

Safari 5:动画效果,阴影、渐变、圆角、倾斜、3D空间等支持良好(3D本图暂不做演示)。chrome和safari显示的效果

chrome 5:相比Safari,三维空间显示异常(3D暂不做演示,所以效果同safari)。

FireFox 3.6:相比chrome,无动画效果(注意眼睛)。
firefox显示的效果

Opera 10.5:相比FireFox无渐变效果(下巴等处的黑色渐变无,暂无图片)。

IE9 preview:像是旋转上出了点问题,可能是写法不对,还有网络字体,不知道会不会还是只支持eot字体。
ie9 preview版本显示效果

sougou 2.0:webkit内核版本未知,无圆角,无阴影,无奈却支持动画,也不知道是否是我代码的问题
搜狗浏览器显示的效果

IE8 :无圆角、无阴影、无渐变、无倾斜、无三维效果…
ie8显示的效果

IE7、 IE6 : 相比IE8,display:inline-block支持异常(效果惨烈不附真相)。

附:各大浏览器内核对照表
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上
Webkit内核:Safari,Chrome,搜狗浏览器等

方法篇:css3画图所用到的属性(围观绕行)

注:#jubailan 为ID选择器示例。

01. border-radius(圆角)
这个用的应该是最多的了,要不然看到的就只是正方形、长方形、正方形….。示例:

#jubalan {border-radius:55px 55px 55px 55px / 25px 25px 25px 25px;}

斜线前面的值分别对应左上、右上、右下、左下的圆角的X轴半径的值,后面的四个值则为Y轴半径的值。如下图:

border-radius

当然上图这样四个角都相同的情况也可以写成:

#jubalan {border-radius:55px / 25px;}

更进一步如果X轴半径和Y轴半径相同还可以省略斜杠和之后的内容,如:

#jubalan {border-radius:55px 65px; }

表示的是左上角和右下角X轴Y轴半径均为55px,右上角和左下角XY轴半径均为65px。

如果只有一个参数则四个角均为相同半径的正圆。如:

#jubalan {border-radius:55px;}

如果只想让左上角变为圆角,可以这样写:

#jubalan {border-top-left-radius:55px 25px;}

同理还有bottom-left、top-right、bottom-roght。兼容wekit、FireFox、Opera浏览器的写法

#jubailan {
border-top-left-radius:55px 25px;   /*标准写法Opera、Chrome*/
-weblit-border-top-left-radius:55px 25px;   /*Safari*/
-moz-border-radius-topleft:55px 25px;   /*FireFox*/
}

02. rotate(旋转)scale(缩放)

#jubalan {
transform: rotate(25deg) scale(0.8);
-webkit-transform: rotate(25deg) scale(0.8);
-moz-transform: rotate(25deg) scale(0.8);
-o-transform: rotate(25deg) scale(0.8); /*Opera*/
}

以上代码表示ID为jubailan的元素顺时针旋转25度,缩小为原来的0.8倍大小。

rotate很容易理解了,负值即为逆时针。

scale可以有两个参数,分别代表横向和纵向的缩放比例,负值则形成翻转,例如:

#jubalan {transform:scale(1,-1);}

表示垂直翻转。

03. skew(倾斜)
与rotate不同的是, skew可以只对X轴或者Y轴旋转似的元素倾斜,很可能变成菱形。能像上面的rotate和scale那样连着写在一起,单独用法:

#jubailan {
transform: skew(-19deg, 10deg);
-webkit-transform:skew(-19deg, 10deg);
-moz-transform: skew(-19deg, 10deg);
-o-transform: skew(-19deg, 10deg);
}

04. box-shadow(阴影)

#jubailan {
box-shadow:0px 0px 5px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 5px 3px rgba(0,0,0,0.5);
}

6个参数分别代表:X轴偏移量、Y轴偏移量、阴影羽化扩展量、阴影大小、阴影颜色。

rgba(0,0,0,0.5)为颜色,表示50%透明的黑色。rgba(255,255,255,1)为纯白色。当然使用别的颜色表示方法也没问题,如:#f00;

05. gradient(渐变)

#jubailan {background:-webkit-gradient(linear, left bottom, left 80%, from(#bbb), to(white)); 

background:-moz-linear-gradient(bottom, #bbb, white 20%);}

表示从元素底部往上的渐变,渐变延伸高度为元素高的20%,颜色由#bbb变为白色。

标签: , ,

4 条评论 发表在“纯代码css3画图,副标题:画一只猫汤”上

  1. 2流说道:

    博客速度不是很快啊。欢迎回访,接友情链接。

  2. bk201说道:

    关于智强有问题求解
    求联系方式

    • jubailan说道:

      这个问到这里来了,我这里几天不上qq,有问题邮箱我好了,yuzh1986@126.com

      注:很多年前的事了我不确定还记不记得

留下回复