CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射

多列布局（multi-column layout）

   <style>
        .div{
            width:60%;
            column-count:3;
            column-rule:1px solid black;
            column-gap:2em;
        }
    </style>
    <div class="div">
        列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条
    </div>

column-count:布局几列
column-rule:列与列之间的间隔条的样式
column-gap:列与列之间的间隔
为了考虑兼容性一般都会：
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
加上浏览器内核前缀。

边框和颜色

rgb和rgba
R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.8)

a为透明度0.8代表百分之80%透明度

HSLA
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

圆角
border-radius：整数 | 百分数
eg:一个div为200PX的正方形

border-radius:100px
border-radius:50%

都会使正方形变成圆形（圆角到极限了），并且当超过50%之后不会再有任何变化。

渐变效果（gradient）
因为我不经常用暂时没有尝试（有点任性0.0），不过推荐一篇很全面的文章：https://www.w3cplus.com/content/css3-gradient

阴影（shadow）

text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);

4个参数
h-shadow:必须，水平阴影的位置，可为负
v-shadow:必须，垂直阴影的位置，可为负
blur: 模糊的距离（阴影模糊的半径）
color:阴影颜色

.div1{
    width:200px;
    height:200px;
    background-color:black;
    box-shadow:50px 100px 10px red;
}
.div2 span{
    font-size:20px;
    text-shadow:3px 3px 3px red;
}
<div class="div1"></div>
<div class="div2" style="margin-top:50px;">
      <span>hello world</span>
</div>

从上图可以看出来，水平和竖直阴影的位置，其实就是阴影相对于原位置的移动，阴影并不会占据任何margin padding 或者width height，对其他元素也不会造成影响（不会改变其他的位置，div2没有因为div1的阴阳而被挤下来），它更像是背景。

反射
box-reflect
有三个参数，分别为direction offset mask-box-image
看个栗子

.classReflect{ 
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top,left bottom,from(transparent), to(rgba(255, 255, 255, 0.51))); 
}

direction:
1.above:指定倒影在对象上边
2.below：在对象下边
3.left:在左边
3.right:在右边
offset：
1.length:用长度定义倒影与对象之间的间隔 可为负
2.precentage：百分比表示 可为负
mask-box-img：
1.url:使用绝对或相对地址指定遮罩图像
2.linear-gradient: 使用线性渐变创建遮罩图像
3.radial-gradient:使用径向（放射性）渐变创建遮罩图像。
4.repeating-linear-gradient:使用重复的线性渐变创建背遮罩像
5.repeating-radial-gradient:使用重复的径向渐变创建遮罩图像
现在来解释下上面代码：倒影在对象下边，与对象之间的间隔为10px，渐变方式为从上到下变化。