2017/7/23 学习心得 css3

1、颜色

透明：opacity

父元素透明，子元素也会透明

transparent：完全透明

2、RGBA HSLA

]

backgroud-color:rgba(0,155,255)

backgroud-color:hsla(100,50%,50%,1)

RGBA:     red  green blue (0-255)   alpha: 透明度 （0-1）

    HSLA:
        H:色调  0-360
        S:饱和度 0%-100%
        L:亮度    0%-100%
        A：alpha 透明度 0-1

3、文本

文本阴影：text-shadow:1px 2px 3px red;

水平位移 垂直位移 模糊程度 阴影颜色；

一个文本可以有多个阴影，用逗号并列起来

左上为负，右下为正

模糊度：值越大，阴影越模糊，反之阴影越清晰

4、盒子模型

传统模型：

盒子最终大小=border+padding+内容的宽度(width)

css3：

content-box=内容盒子 

padding-box=内边距

border-box=边框盒子

box-sizing:content-box  外加模式,设置放内容区域的大小，border和padding不计算入width之内，width=内容宽度

padding-box，padding计算入width内，width=padding+内容

box-sizing:border-box  内减盒子，加内边距和边框只会减少内容盒子的大小，border和padding计算入width之内，width=内容+padding+border。

5、私有化前缀

background:  -webkit-linear-gradient(left,red,blue)

私有化前缀：

         浏览器私有化前缀：

           -webkit-: 谷歌 苹果

            -moz-:火狐

            -ms-：ie

            -o-：欧朋