前端学习笔记(十八)

第十八章：H5新增背景属性

新增背景属性

    1.background-size: X Y;改变背景图片的大小
        cover 保持宽高比不变，等比例放大缩小，图片四条边轴都铺满盒子：使盒子完全被背景图片占满
        contain 同上，上面的区别是水平或者垂直方向其中一个占满盒子就停下来：使盒子完全包容背景图片全部
    2.多背景
        background-image:url('1.jpg'),url('2.jpg');
        先执行前面的样式！
   3. background-origin背景图片的起始位置
        当使用 backgroundattachment
        为fixed时，该属性将被忽略不起作用。
        div{
            background-origin:padding-box; /*默认 从padding内容开始显示*/
            background-origin:content-box; /*从内容区域开始*/
            background-origin:border-box; /*从border区域开始*/
        }
    4.background-clip 背景显示位置 裁剪
        规定背景图片在什么范围可见，规定之外的地方就会被裁剪掉
        div{
            background-clip:border-box; /*默认值，border区域之外全部剪掉*/
            background-clip:content-box; /*内部区域之外全部剪掉*/
            background-clip:padding-box; /*padding区域之外全部剪掉*/
        }
    5.复合属性
        /*背景图片 背景重复 背景位置/背景大小 背景起始 背景裁剪 背景关联 背景颜色*/
        div{
            background:url('') no-repeat center/cover padding-box border-box fixed #666;
        }

新增颜色

    新增hsl() 和 hsla() 颜色
    H：Hue(色调)。取值为：0 – 360，
    S：Saturation(饱和度)。取值为：0.0% 100.0%，
    L：Lightness(亮度)。取值为：0.0% 100.0%。
    /*用hsl写一个红色*/
    background:hsl(360,100%,50%);
----------------------------------------渐变色-----------------------------------------
-----------线性渐变------------

    CSS linear-gradient()

    用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient> 数据类型，是一种特别的<image> 数据类型。
    <gradient> 是一种<image> CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。
    <gradient> 其实际的大小取决于其填充元素的大小,不可改变。
    /* 渐变轴为45度，从蓝色渐变到红色 */
    linear-gradient(45deg, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */
    linear-gradient(to left top, blue, red);
    /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
    linear-gradient(0deg, blue, green 40%, red);
    关于加兼容前缀的语法区别：
    区别：1.标准写关键词加to 兼容不加to 2.渐变方向相反 相差九十度 3. 标准正值增加顺时针旋转 兼容正值增加是逆时针旋转
    不加前缀写法：
    background: linear-gradient(90deg,red,blue);
    加前缀应该是：
    background:-webkit-linear-gradient(0deg,red,blue);
    渐变低版本IE兼容
    给低版本浏览添加滤镜 startColorstr=开始的颜色 endColorstr=结束的颜色 GradientType=值是0的时候是左右 1是上下！ 这里面的颜色必须要是全写模式，不能使用简写
    .grad {
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’,endColorstr=’#ff0000’,GradientType=’1’);
    }
    repeating-linear-gradient 重复线性渐变
    创建一个由重复线性渐变组成的<image> ， 这是一个类似 lineargradient的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient> 数据类型的对象, 这是一个特殊的<image> 类型。
    每重复一次，彩色光圈的位置偏移基本线性渐变的长度（最后一个彩色光圈和第一个颜色的距离）的倍数。因此，每个结束彩色停止的位置与起始彩色停止一致; 如果颜色值不同，这将导致一个清晰的视觉过渡。
    background: repeating-linear-gradient(45deg,red 0px ,red 20px,blue 20px,blue 40px);

-----------radial-gradient 径向渐变------------

由从原点放射两种或多种颜色之间的渐进转换的图像。其形状可以是圆形或椭圆形。
标准写法：写法略有不同 不能使用角度 关键词是at
radial-gradient(circle at center, red 0, blue, green 100%);
属性详细讲解：
<position> ：主要用来定义径向渐变的圆心位置。此值类似于CSS中backgroundposition
属性，用于确
定元素渐变的中心位置。如果这个参数省略了，其默认值为“center” X 和 Y 方向
<shape> ：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”
<size> ：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthestcorner”
。可以给其显式的设置一些关键词，
closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角；
同重复径向渐变
background: repeating-radial-gradient(red 0px ,red 20px,blue 20px,blue 40px);

倒影 -webkit-box-reflect

可以在元素的一个特定方向有倒影！
此属性是谷歌浏览器私有属性！不建议在开发项目中大规模使用！
    img{
        -webkit-box-reflect:left 0;
    }
    direction （倒影对象的位置） = above上 below下 left左 right右
    offset （定义倒影和对象之间的间隔,可以为负值）

mask-box-images

    遮罩图像url（）和渐变色不能同时使用
masks 遮罩
定义：允许通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。
    div{
        /*遮罩图像*/
        -webkit-mask-image:url('');
        /*遮罩平铺*/
        -webkit-mask-repeat:no-repeat;
        /*遮罩位置*/
        -webkit-mask-position:关键词 px 百分比;
        /*遮罩大小*/
        -webkit-mask-size:px 百分比;
    }
    复合写法：(和background相同)
    {
        mask: url(resources.svg#c1) 50px 30px/10px 10px repeatx;
    }