次画的是QQ浏览器图标，比较复杂，各种高光渐变色内阴影等。其实，CSS画画就和用PS画画一样，从最底层，一层一层往上画，最后合成一张图：

1、让容器居中,同时将body背景变成灰色，可以看得更清楚

html,body{
 height:100%;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eee;
}

2、画一个蓝色渐变圆形，作为外边的蓝色环（现在还是圆，不是环），相对定位，这样里面的所有元素都可以以它为定位点了：

.logo{
 width: 300px;
 height:300px;
 background: linear-gradient(to right bottom,#66adff,#1a6adb);
 border-radius: 999px;
 position: relative;
}
<div class="logo"></div>

效果图：

3、给 logo 的 after 上个灰色，做出镂空效果：

.logo:after{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background-color: #eee;
 border-radius: 999px;
 z-index: 15;
 left: 50%;
 top:50%;
 margin-left: -75px;
 margin-top:-75px;
}

效果图：

4、给 logo 的 before 加上渐变背景，渐变色和 logo 一样，只不过颜色反过来，这样有凹陷的感觉，同时将它治愈 after 的下面，比 after 稍微大点：

.logo:before{
 position: absolute;
 width: 166px;
 height: 166px;
 content:'';
 background: linear-gradient(to right bottom,#1a6adb,#66adff);
 border-radius: 999px;
 z-index: 9;
 left: 50%;
 top:50%;
 margin-left: -83px;
 margin-top:-83px;
}

效果图：

5、由于边框不支持渐变，我们只能接着加div，来画出刚才的 before 的高光：

.before-high-light{
 position: absolute;
 width: 168px;
 height: 168px;
 content:'';
 background: linear-gradient(to right bottom,#96d9ff,#5cafff,#96d9ff);
 border-radius: 999px;
 z-index: 8;
 left: 50%;
 top:50%;
 margin-left: -84px;
 margin-top:-84px;
}
<div class="logo">
 <div class="before-high-light"></div>
</div>

效果图：

6、画左上角的大片高光，它是被遮挡在中间圆的下面，所以，z-index要更低，同时它的颜色是从半透明的白色到无，大小要比 logo 小个一两像素：

.left-top-high-light{
 position: absolute;
 width: 298px;
 height: 298px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 50%);
 border-radius: 999px;
 z-index: 7;
 left: 50%;
 top:50%;
 margin-left: -149px;
 margin-top:-149px;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
</div>

效果图：

7、画云，一共三朵，放在右下角，白色背景，利用内阴影，给云上色(放在chrome调整，这块比较麻烦，需要细细调)，由于css容器样式的局限性，不能让云成为一个整体，建议这类可以考虑用svg或者canvas实现，我这里还是用div来实现：

.clouds{
 position: absolute;
 width: 90px;
 height: 90px;
 background-color: #fff;
 border-radius: 999px;
 z-index: 16;
 bottom: 20px;
 right:60px;
 box-shadow: -3px 15px 12px 0 rgba(42,127,236,.3) inset;
}
.clouds:before{
 content:'';
 position: absolute;
 width: 100px;
 height: 70px;
 background-color: #fff;
 border-radius: 999px;
 bottom: -20px;
 left:-30px;
 box-shadow: 5px -5px 8px 0 rgba(42,127,236,.3) inset;
}
.clouds:after{
 content:'';
 position: absolute;
 width: 123px;
 height: 60px;
 background-color: #fff;
 border-radius: 0 999px 999px 0;
 bottom: -20px;
 right:-30px;
 box-shadow: -16px -9px 11px 0 rgba(42,127,236,.3) inset;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
</div>

效果图：

8、左下角，云之下的高光，这个高光容器，宽高为 logo 的一半，左下角为全圆角，其他三个角可以不设置圆角，z-index 置于前面所有内容的下面，logo 的上面，背景为从左上到右下，从无到有的白色渐变，如果觉得太生硬，可以稍微给点羽化：

.left-bottom-high-light{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 70%);
 border-radius:0 0 0 999px;
 z-index: 14;
 left:0;
 bottom:0;
 filter: blur(1px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
</div>

效果图：

9、底部阴影 shadow，可以用背景色+羽化来实现，也可以用 box-shadow 来实现，这里我们用第一种方法：

.shadow{
 position: absolute;
 width:200px;
 height:10px;
 content:'';
 background:#666;
 border-radius:50%;
 z-index: 1;
 left: 50%;
 bottom:-3px;
 margin-left: -100px;
 filter: blur(4px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
</div>

效果图：

10、顶部高光 high-light，实现方法和上面的阴影一样：

.high-light{

position: absolute;

width:100px;

height:20px;

content:'';

background:rgba(255,255,255,.9);

border-radius:50%;

z-index: 15;

left: -8px;

top: 33px;

filter: blur(4px);

transform: rotate(-45deg);

}

<div class="logo">

<div class="before-high-light"></div>

<div class="left-top-high-light"></div>

<div class="clouds"></div>

<div class="left-bottom-high-light"></div>

<div class="shadow"></div>

<div class="high-light"></div>

</div>

最终效果图：

创文章 请勿转载

上一次教给大家使用倒叙代码实现 “小编撤回了一条消息并亲了你的小脸”（订阅我查看往期）

可能小编第一次教大家，语言有些混乱导致很多人没有看懂。

后来小编建了群在里面发了视频，有兴趣的可以通过往期文章查看

废话不多说，这一次的比较简单，先给大家看一看效果：

限制ZZ可见的说说，这样发会被打的...谨慎使用。

骗超赞专用的说说

也可以在他人的评论中使用

其实这一次的代码非常简单，就是利用QQ空间本身自带的表情图标

这些图标不能直接打出来，而是被赋予了一个编号

例如我们刚才使用的打赏的图标的代码就是：

[em]e10033[/em]

其中我们来看一下 10033 是表情的代码，33号表示打赏的图标。

这一个号码可以任意替换以达到不同的效果，如下图：

使用方法，看上图中的图标（竖着看,分三排）

第一个图标的代码是：[em]e10001[/em]

第二个是搜集的图标： [em]e10002[/em]

第三个是Ipad的图标： [em]e10003[/em]

第十一个是一朵花的图标： [em]e10011[/em]

接下来，跟大家说一下图中，发表的说说的时候文字如何变成其他颜色：

{uin:1000,nick:点击领取红包}

其实这是一个连接，点击后会打开QQ号为1000的人的空间

效果就是：

好啦，大家可以随意发挥自己的想象力啦

什么Iphone7 Iphone8在线都不在话下

小编已经迫不及待地想要看看大家有什么好的创意了！记得在回复中告诉小编哦

记得关注小编哦~

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

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

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

前面有文章CSS绘制三角形和箭头，不用再用图片了，可以先去了解一下！

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

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

2. border-xxx-xxx-radius的两个值分别代表着椭圆长轴和短轴长度的一半，通常简写的时候例如3. 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

.test{
 border: 20px solid;
 border-top-color:#4e5ecf;
 border-right-color:#ee1166;
 border-bottom-color:#44bb44;
 border-left-color:#775544;
 width:100px;
 height: 100px;
 background: #272822;
}

将每个boder的颜色值设为不一样，就可以清楚的看到每个border的负责区域，有三角形的雏形了。其实，绘制三角形的原理很简单，如下图

我们可以这样去理解一个border所代表的区域，那就是“三角形x2 + 矩形”，以border-bottom为例，

矩形=width x ( border-bottom-width )

相邻的border交叉的区域构成一个矩形，每个border各负责一半，一个直角三角形。只要将其中的一个border的颜色值设为transparent或者背景色，从视觉上就可以得到一个直角三角形了。

• 三角形1=border-left-width x border-bottom-width
• 三角形2=border-right-width x border-bottom-width

当width=0 （height=0, border-left || border-right）时，我们通过调整border的宽度可以将这两个直角三角形拼接成任意形状的三角形，或者调整width(height)等获得一个梯形，当然梯形也可以通过拼图得到，这样不是更简单吗？。Transform中旋转将为我们提供更多的灵活变化。

绘制企鹅

结束了对于基本图形部分的一些讨论，开始着手于QQ 企鹅的绘制。

第一步当然是基本框架的绘制了。

通过对手里的Logo图像的观察，按照层次划分来组合最终的效果。选择使用绝对位置position:absolute;来布局各个元素。主要划分为头部，身体，围脖，双手，双脚。

框架的结果图：

介绍下这个过程中几个比较典型的图形绘制方法：

1、企鹅的眼睛：椭圆，直接设置border-radius:50% 50%; 即可（因为宽高分别为44px和66px，所以也可以这样设定：border-radius: 22px / 33px）

2、围脖的尾部：一个圆角各异的矩形，所以这里需要对几个角分别设定border-radius，微调的结果为

border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;

3、企鹅的胳膊：手的绘制较为麻烦一点，可以分为上下两个部分，将绘制的结果拼接到一起。那么对于不需要的部分怎么办呢？我们可以将上(下)部分放到一个div(container)中，利用overflow:hidden的属性来截取所要的部分。绘制复杂图形的时候常用的方法就是切割和拼接，将图形切割成一个个简单的小块，通过层叠和旋转变化进行组合。

使用transform:rotate(deg)的时候，优先设定transform-origin属性，会比较方便。设定的点作为中心点，整个图形绕着这个点进行角度变化。例如：transform-origin:bottom left， 使用左下角作为原点。也可以使用具体的像素值和百分比。

在基本的框架线条中比非常多的使用了border-radius用于构造各种曲线条，小企鹅是圆圆胖胖的，:)

接下来就是对只有基本线条的小企鹅进行着色了。着色的过程可以帮助我们调整z-index，也就是各个模块的重叠层次，遮盖了一些无用的线条和框角。

公告

喜欢小编的点击关注，了解更多知识！

演示地址和源码点击下方“了解更多”