CSS还可以这样做

1.CSS还能做什么

CSS都知道是设置样式的，设个背景、字体大小什么的，当然还有布局也要用到的，这里主要是想看看CSS还能做什么？

参加笔试（具体公司不说了），用HTML5的canvas画一个圆环，对于canvas只知道是用来绘图的，没有实践过。不过可以用CSS做啊，之前研究过CSS可以画三角形，是时候表演CSS真正的技术了。

来个简单的，三角形，正方形和长方形就不演示了。

三角形

打个样：

.triangle {
width: 0;
height: 0;
border-top: 100px solid red;
border-bottom: 100px solid blue;
border-left: 100px solid yellow;
border-right: 100px solid green;
}

原理很简单，就是利用border属性，当宽高都为0时，设置border属性就是这样子的，关键是宽高都为0。如果想要下面的蓝色三角形，就把其他三个border的背景设为transparent，就像下面的样子：



也不一定需要四个方向上的border都设置，设置两个方向也可以做三角形，三个也可以，看下面的例子。





三角形就写到这里，想改变形状的话可以设置border的大小。

圆形

圆形利用了border-radius，这是一个CSS3的属性，主要是拿来画圆角的。

来个圆看看吧：

.circle {
width: 100px;
height: 100px;
border-radius: 50px;
background: red;
}

好圆，再来一个不圆的吧，那就是椭圆了。

.circle {
width: 200px;
height: 100px;
border-radius: 100px/50px;
background: red;
}

画圆的关键是理解：border-radius，这个属性需要好好谈一谈：

基本语法：border-radius ： none | {1,4} [/ {1,4} ]? 这写的是啥？数学不好，符号太简洁了，还是喜欢搞几个例子看看。

首先它和border属性类似，不过有一些不一样：

方向不是上下左右，而是左上角，右上角，右下角，左下角（按照顺时针方向），第一个画圆的例子，只画左上角的圆角，其他三个方向类似：

.circle {
width: 100px;
height: 100px;
border-top-left-radius: 50px;
background: red;
}

数值代表的含义，如果只有一个就圆的半径，两个的话就分别是水平直径和垂直直径，不就是椭圆的半长轴和半短轴，比如上面的例子改一下，也不是很难：

.circle {
width: 200px;
height: 100px;
border-top-left-radius: 100px 50px;
background: red;
}

至于椭圆的例子中的/符号，就是前面的代表四个方向的水平轴，后面的代表四个方向的垂直轴，最后来一个奇葩的：

.circle {
width: 200px;
height: 200px;
border-radius: 80px 70px 60px 50px / 40px 30px 20px 10px;
background: red;
}

这回就可以去完成开始提到的任务了，画一个圆环了，一个大圆里面套一个小圆，小圆背景和外面一样（不能设透明，那样就会显示大圆的背景），搞定！

.big_circle {
width: 200px;
height: 200px;
border-radius: 100px;
background: red;
position: relative;
}
.small_circle {
width: 100px;
height: 100px;
border-radius: 50px;
background: white;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}

<div class="big_circle">
<div class="small_circle"></div>
</div

圆大概就这些了，主要学习了一个CSS3属性，border-radius的好处可是大大的。做按钮开关会很好看的，就不需要请求一张图片了。

其他图形

还有一个图形，对话框，笔试里见过，什么样子先看一下：



先直接上代码：

.dialog {
width: 300px;
height: 200px;
border: 5px solid red;
position: relative;
}
.dialog:before {
content: '';
position: absolute;
height: 0;
width: 0;
left: 100%;
top: 50px;
border-top: 50px solid transparent;
border-left: 50px solid red;
border-bottom: 50px solid transparent;
}

效果就是这样的：两个点，before伪类和绝对定位，后面一个就不解释了，关于CSS的定位网上一抓一大把，之前也有过相关的总结。来看一看这个before是个什么鬼？

定义： ：before 选择器在被选元素的内容前面插入内容，使用 content 属性来指定要插入的内容，并设置所插入内容的样式。这玩意拿来干什么用，举个例子，剧本里面通常有：

A：你好

B：你也好

A：你吃饭了吗

B：我吃过了，你呢？

…

不知道的以为在写剧本呢，每个人的台词前面都表明了这是谁说的。OK，这就可以用Before来做，例子呢：

p.userA:before {
content: 'A: ';
color: red;
}
p.userB:before {
content: 'B: ';
color: blue;
}

<p class="userA">你好！</p>
<p class="userB">你也好！</p>
<p class="userA">你吃过饭了吗？</p>
<p class="userB">我吃过了，你呢？</p>

怎么样？这是不是省了很多时间？回归正传，一个对话框其实就是一个矩形加一个三角形，使用before会感觉很炫吧。他还有一个兄弟after，这两都是伪元素，一个在前一个在后。

顺便把另外几个伪元素也拿出来：:first-letter（第一个字符添加特殊样式），:first-line（文本的首行添加特殊样式）。

还能画什么

只有你想不到的，没有CSS不能画的，列个地址，里面都是CSS画的。

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504051631.html