第五章 background颜色、图片和圆角

1、background-color：初始值为rgba(0,0,0,0)transparent
    RGB颜色：rgb（0，0，0）-rgb（255，255，255）
    十六位颜色：
    RGBA
    HSL
2、background-image初始值none
    background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528386583845&di=f478468f9c79afde38e94c726312c5a1&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201610%2F11%2F20161011180402_TjeW2.thumb.700_0.jpeg');/*url图片地址，支持gif图片*/
    background-repeat:no-repeat;不需要平铺
    background-repeat:repeat-y;
    backgroud-repeat-x:no-repeat; 横向不要平铺
    background-repeat-y:no-repeat;纵向不要平铺

    说明：background-color在background-image下面一层

3、background-position背景位置
    background-position:0px 0px;/*x轴水平方向，右边为正数；y轴纵向方向，下边为正数*/left，center，right，top，center，bottom
    只有一个数值时，水平方向是这个值，竖向的值是center。
    background-position-x/*x轴水平方向，右边为正数；*/
    background-position-y/*y轴纵向方向，下边为正数*/
    background-position:center;居中
    background-position-x:0-100%说明：0%为图片和盒子最左边，100%为图片和盒子最右边（大盒子-图片宽度）*%

4、background-size图片放大缩小
    background-size:100% 100%;铺满盒子，依照大盒子拉伸图片，第一个宽度拉伸，第二个高度拉伸
            cover覆盖盒子
            contain；图片等比例拉伸，直到一边先铺满
5、background-attachment：fixed；图片不会根据滚轮滚动

6、background-origin背景图片显示基点，背景图片的起始位置可以调整的
    content-box：背景图片的起始位置盒子的内容
    pading-box：默认，背景图片的起始位置为盒子内边框
    border-box：背景图片的起始位置为盒子外边框
7、background-clip裁剪方围
    content-box：背景图片的起始位置盒子的内容
    pading-box：默认，背景图片的起始位置为盒子内边框
    border-box：背景图片的起始位置为盒子外边框


8、background：green url() no-repeat center/cover;

   复合型写法：背景：颜色 图片 重复 起始位置 裁切位置 位置/大小

9、broder-radius：10px 边框圆角，8个点的圆角半径  px/em  em是正对文字的像素
border-radius: 10px 20px 30px 40px/10px 20px 30px 40px;左上-10，右上-20，右下-30，左下-40

border-radius: 10px 20px;左上+右下，右上+左下
border-radius: 10px 20px 30px;左上-10，右上-20，右下-30，左下-20
border-radius: 10px 20px 30px 40px;左上-10，右上-20，右下-30，左下-40
broder-radius：10px/30px 上下/左右