欢迎光临
Html5圈

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制的腾讯QQ企鹅Logo


CSS3绘制腾讯QQ的企鹅Logo效果

 

今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。

 

一、如何使用CSS3来绘制图形?

 

网络上经常能够看到一些用CSS3绘制的精致图形,它们通常由矩形,圆形,椭圆,三角形,梯形等组合而成。要想绘制我们自己的图形,就要先了解下基本图形的绘制方法了

 

一个display:block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形,圆形和椭圆形。

 

CSS3绘制的腾讯QQ企鹅Logo

 

在使用border-radius时,有几点可能需要注意一下:

 

1、border-radius,可以分别对4个角进行设定。 例如上图:border-top-left-radius: apx bpx;

2、border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半,通常简写的时候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为20px,也就是半径为10px的圆形(圆角部分)。

3、当使用百分比数值时,a 相对于width, b相对于height

 

如果a == width/2, b == height/2,结果就是一个椭圆,与此同时a==b,那么就可以得到一个半径为a的圆形了。

在看三角形之前,首先看看三角形的“绘制者”border,下面的例子:

 

CSS3绘制的腾讯QQ企鹅Logo

 

Css

未经允许不得转载:Html5圈 » CSS3绘制的腾讯QQ企鹅Logo

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线

1

2

3

4

5

6

7

8

9

10

.test{

    border: 20px solid;

    border-top-color:#ff0000;

    border-right-color:#00ff00;

    border-bottom-color:#0000ff;

    border-left-color:#FFFF00;

    width:100px;

    height: 100px;

    background: #272822;

}