2017/7/23 学习心得 css3

时间:2021-03-02 16:25:18

1、颜色

透明:opacity

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

transparent:完全透明

2、RGBA HSLA

2017/7/23 学习心得 css3]

2017/7/23 学习心得 css3

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-:欧朋