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