前言

在前端开发中经常会用到很多的简易图形，例如三角形，箭头，圆形等。有很多人一开始会想着用小的图片实现，不过这样会增加页面请求次数，延缓页面加载效果。

在CSS中有个border属性，它完全可以达到制作各种简易图形的效果，今天我们就一起来看看吧。

文章中的代码都已经放在了github上，感兴趣的同学自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。

用到的知识点：

1、transform：rotate；（旋转）

2、animation；（动画关键帧）

首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;

.box{

前言

在进行前端开发时，图标库的使用是一项必须掌握的技巧，目前流行的图标库有fontawesome，iconfont等，只需要引入到项目中，然后使用对应的class，就会得到对应的图标。

但是你们有没有想过，如果是自己的话该怎么去实现这些图标呢？今天我们就来看看一些稍微复杂的图标是如何使用纯CSS3实现吧。

文中的代码已经放到github上了，感兴趣的同学自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html

在网上有同学问我：如何在IE9以下版本的浏览器支持圆角的特性。为了让大家在以后的工作中能够更快、更有效的解决这种问题，现在把一种最简单、最有效的解决方案总结给大家，希望能够帮助到你！【就两步搞定！】

第一步

下载一个重要的文件 ie-CSS3.htc，这种类型的文件只要IE才能够识别。

下载地址：http://download.csdn.net/detail/lxcao/9685089 【这是老曹的CSDN博客】

前言

在之前的文章中有讲解过，如何通过CSS代码实现类似于杯子和心形的图案，今天这篇文章我们继续来看看两个复杂的图案。

文章中的代码已经放到github上了，感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure2.html