14圆角，设置背景，背景蒙版，阴影，渐变

14圆角，设置背景，背景蒙版，阴影，渐变

01圆角

border-radius 设置圆角

    border-radius：左上 右上 右下 左下;
    左上 != 右下  右上 = 左下
    border-radius：左上 右上 右下;
    左上 = 右下  右上 = 左下
    border-radius：左上 右上;
    左上 = 右下 = 右上 = 左下
    border-radius：左上;

    实质上，每一个角的上面，都有一个水平半径和一个垂直半径，如果每一个方向上的半径不同，
    则需要写成 水平半径/垂直半径

    注意，圆角的值也可以设置百分比，一般的制作一个园形，可以直接设置 50%

02设置背景

background-origin 设置背景图渲染的起始位置

    值
        padding-box 默认值，从padding位置开始渲染
        content-box 从内容部分开始渲染
        border-box 从border 开始渲染

background-size 设置背景图片的填充方式，也就是设置背景图大小

        值：
        cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片
        contain 以长边为基础渲染图片，短边按比例缩放
    值还可以是以下写法
    background-size:宽度 高度;
    如果只写一个宽度，高度按照比例渲染
    宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

03背景蒙版

背景蒙版 mask

    1.最初只有 谷歌浏览器支持
    2.背景蒙版可以把 透明图的透明部分转化为不透明，把不透明的渲染为透明
    3.他的设置方式和背景一致

04浏览器前缀

    -webkit- ：是谷歌、苹果等浏览器内核的前缀
    -moz-: 是火狐浏览器内核的前缀
    -ms-: 是IE浏览器内核的前缀
    -o-: 欧朋浏览器内核的前缀

    在css属性名之前添加 浏览器前缀，表示该css属性是浏览器的私有属性

05阴影

box-shadow 设置阴影

    box-shadow: x轴方向偏移量，y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色 阴影的位置(可以忽略)
    inset 设置内阴影

    box-shadow: 10px 10px 20px 0 #ff0 inset;

    设置多组阴影，使用英文,逗号隔开，设置的方式一样

    注意：在元素上设置阴影通常是为了增强元素的立体感，阴影不占据文档流空间，因此不会引起元素盒模型的变化

.wp3{
            box-shadow: 0 0 50px 2px #f60 inset;
        }

        .wp4{
            box-shadow: 10px 0 0 0 #f00, -10px 0 0 0 #f0f, 0 -10px 0 0 #ff0,0 10px 0 0 #04be02;
        }

06渐变

渐变，至少IE10支持

    渐变也是背景图的一种

1.线性渐变

        background: linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置,......)

linear-gradient 里面的参数

        1.to 方向，方向可以使用具体的方向单词，也可以使用角度度数
        如果是度数，则直接写具体角度，不需要加to
        正值：顺时针旋转
        0 -> 向上
        90 -> 向右
        180 -> 向下
        负值：逆时针旋转

        开始渐变的位置 可以是具体的数值，也可以是百分比

2.径向渐变

radial-gradient 设置径向渐变

    radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置,......)

形状的可选值：

    1.circle 圆形，默认值，可以省略

半径可以是具体的数值，也可以是如下系统给定的值：

    farthest-corner 最远角
    closest-corner 最近角

    farthest-side 最远边
    closest-side 最近边

圆心的设置

    1.可以是具体数值，第一个数字代表x轴方向，第二个数值代表y轴方向
    2.可以是 left top right bottom center 等方向名词的组合

渐变的开始位置

    1.可以是具体数值
    2.可以是百分比，百分比是以半径长度为基准