CSS3初体验之奇技淫巧

---

自CSS3流行以来，虽然之前看过一遍全部的新增属性，但其实在实际项目中用到的少之又少。因此没有造成系统性的认识，以及看到效果立马就能想到解决方案的能力。而后最近正好遇到一个须要绘制大量动画的需求，因此决定趁此机会好好研究一下这个既熟悉又陌生的css3。

在正式开始css3以前，先来介绍一些比较经典的css3实例，让你们好好感觉一下css3的魅力，本文会提到如下几个css3的属性：

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

border-radius

• 相信这个属性，写过css的同窗都知道，用来产生圆角，好比画一个圆形：

  div {
        width:100px;
        height:100px;
        background:red;
        border-radius:50px;    //圆角效果最大为长宽的一半，因此设置为50px及以上都可。
        /*border-radius:50%; */   //或者使用百分比，设置为50%及以上都是圆形效果。
    }复制代码

  

• 而后咱们来看看它的语法：border-radius: [左上] [右上] [右下] [左下]，因而咱们来画一个半圆

  div {
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px 50px 0 0;
    }复制代码

  

• 那若是要画一个椭圆该怎么办呢？你会发现上面的语法貌似作不到了，其实border-radius的值还有一种语法: x半径/y半径：

  div {
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px/25px;
    }复制代码

  

• 若是我要画半个椭圆，又要咋办呢？

  div {
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 100% 0 0 100% /50%;
    }复制代码

  

::after

这里拿个简单的例子来看，咱们要画一个放大镜，以下图：

分析一下，这个放大镜能够由两个div组成，一个是黑色的圆环，一个是黑色把手（旋转45度）。因此咱们就须要用两个div来实现吗？答案是NO，一个div也是能够的，咱们能够借助::after来添加一个元素。同理若是须要三个div，咱们还可使用::before再添加一个元素。下面看一下代码：

div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #333;
    position: relative;
}
div::after {
    content: '';
    display: block;    
    width: 8px;    
    height: 60px;    
    border-radius: 5px;    
    background: #333;    
    position: absolute;    
    right: -22px;    
    top: 38px;    
    transform: rotate(-45deg);
}复制代码

attr和content

好比咱们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，可是如今咱们要更美观，可使用css3提供的attr：可以在css中获取到元素的某个属性值，而后插入到伪元素的content中去。

假如咱们的html代码以下：

<div data-title="hello, world">hello...</div>复制代码

咱们来看看实现这个插件的css代码：

div {
    position: relative;
}
div:hover::after {
    content: attr(data-title);    //取到data-title属性的值
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: absolute;
    top: -50px;
    left: -30px;
}复制代码

当hover的时候，在元素尾部添加一个内容为data-title属性值的元素，因此就实现了hover显示的效果，以下图所示：

box-sizing

咱们知道，在标准盒子模型中，元素的总宽＝content + padding + border + margin。 css中的盒子模型你们可能都知道，可是这个盒子模型的属性可能没有那么多人知道，box-sizing属性就是用来重定义这个计算方式的，它有三个取值，分别是：content-box（默认）、border-box、padding-box

通常来讲，假如咱们须要有一个占宽200px、padding10px、border5px的div，通过计算，要这么定义样式。

div {
    width: 170px;   //这里的宽度要使用200-10*2-5*2 = 170获得。
    height: 50px;
    padding: 10px;
    border: 5px solid red;
}复制代码

而后咱们来使用一下box-sizing属性。

div {
    box-sizing: border-box;
    width: 200px;  //这里的宽度就是元素所占总宽度，不须要计算  
    height: 50px;
    padding: 10px;
    border: 5px solid red;
}复制代码

linear-gradient

作活动页面的时候咱们常常会遇到这样的需求：

顶部的中间一张大banner图片，而后整个区域的背景色要根据图片背景色渐变。就可使用这个属性了。

div {
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, red, yellow, black, green);
}复制代码

是否是颇有趣？其实，linear-gradient还有更多有趣的功能，你能够根据下面的动图去感觉一下：

你觉得这就完了？等等，还有更强大的呢！repeating-linear-gradient，来感觉一下：

linear-gradient还有更增强大的功能，好比它能够给元素添加多个渐变，从而达到更NB的效果。

radial-gradient

上面的linear-gradient是线性渐变，这个属性是径向渐变。下面的代码实现了一个chrome的logo。

div.chrome {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
                radial-gradient(circle, #fff 33%, transparent 33%),
                linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
                linear-gradient(60deg, #4CAF50 33%, transparent 33%),
                linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
                linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
                linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
                linear-gradient(0deg, #4CAF50 45%, transparent 45%),
                linear-gradient(60deg, #4CAF50 30%, transparent 30%),
                linear-gradient(120deg, #F44336 50%, transparent 50%),
                linear-gradient(180deg, #F44336 30%, transparent 30%);
}复制代码

实现原理就是使用了多个渐变色放在div上，友协被遮住，视觉上就产生了想要的效果，是否是很强大！看了下图你就知道其实就是在div上加了不少个渐变。

box-shadow

上面的例子大都是对css3新属性的了解和认识，这个实例则是有关于解决方案的例子。

• 需求：咱们要实现下面这个效果图（三个边框：黑色，绿色，红色）：

  

• 解法一：假如没有css3知识，咱们能够作这样作：用三个div，分别设置边框，而后分别控制宽高和位置来达到这个效果。显然，很复杂，这里就不贴代码了。

• 解法二：如今咱们有css3的知识了，借助box-shadow就能够轻松解决这个问题。先来看看它的语法：box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色]，而且还能添加多个阴影，使用逗号隔开。

  

  固然你还能够继续增长，四重边框，五重边框......都再也不是问题啦。另外，还能加圆角，阴影会贴紧内层div。

  使用这种方法，有一个缺点就是，不支持虚线边框。

• 解法三： 使用outline（只能支持两重边框）

  

  使用这种方法的缺点就是，只能支持两层的边框，并且还不能根据容器的border-radius自动贴合。

总结

经过这段时间对css3的深刻了解，发现css3真的很强大，研究起来仍是挺有趣的，只有想不到，感受没有作不到。不过为了实现很酷炫的效果，可能须要编写大量的css代码，这个时候使用什么技术就须要咱们本身来衡量了。