CSS边框与背景

边框：

边框border：

border-style 上 右 下 左：各个边框的样式
    分开设定：border-top-style、border-right-style、border-bottom-style、border-left-style
    none：没有边框(默认值)
    solid：实线边框
    dashed：破折线边框
    dotted：圆点线边框
    double：双线边框
    groove：槽线边框
    ridge：脊线边框
    inset：使元素内容具有内嵌效果的边框
    outset：使元素内容具有外凸效果的边框

border-width 上 右 下 左：各个边框的宽度
    分开设定：border-top-width、border-right-width、border-bottom-width、border-left-width

border-color 上 右 下 左：各个边框的颜色，默认为字体颜色
    分开设定：border-top-color、border-right-color、border-bottom-color、border-left-color

border width style color：样式、边框宽度和颜色的简写方式

border-radius：设置圆角边框：长度值或百分数

border-top-left-radius：长度值或百分数 左上边角
border-top-right-radius：长度值或百分数 右上边角
border-bottom-left-radius：长度值或百分数 左下边角
border-bottom-right-radius：长度值或百分数 右下边角

设置圆角矩形
    div { border: 10px solid red; border-radius: 10px; }

四条边分别设置
    div { border: 10px solid red; border-radius: 10px 20px 30px 40px; }(上右下左)

背景

background-color：背景颜色

颜色值 设置背景颜色为指定色
transparent：设置背景颜色为透明色

background-image：背景图片

none：取消背景图片的设置
url：通过 URL 设置背景图片

background-repeat：背景图片平铺方式

repeat-x：水平方向平铺图像
repeat-y：垂直方向平铺图像
repeat：水平和垂直方向同时平铺图像
no-repeat：禁止平铺图像

background-position：背景图片位置

top/bottom：将背景图片定位到元素顶部/底部
left/right：将背景图片定位到元素左部/右部
center 将背景图片定位到元素中部
长度值 使用长度值偏移图片的位置：background-position:10px 20px;(10px为向右偏移量，20px为向下偏移量)
百分数 使用百分数偏移图片的位置

background-size：背景图片尺寸

auto：默认值，图像以本尺寸显示
cover：等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合
长度值：CSS 长度值，如 px、em，有两个数值，第一个为长度，第二个为高度
百分数：一个百分数，如56%,背景图片会占用总容器的容量大小

background-attachment：背景图片滚动方式

scroll：默认值，背景会随着内容一起滚动
fixed： 背景固定在视窗上，内容滚动时背景不动
local:  背景相对于父元素固定，但是相对于整个视口是滚动的

background-origin：背景图片填充方式

border-box：在元素盒子内部绘制背景，背景绘制时会包含边框在内
padding-box：在内边距盒子内部绘制背景，默认值，背景绘制时不会包含边框
content-box：在内容盒子内部绘制背景，背景绘制时不包含边框和内边距，只包含内容部分

background-clip：背景图片显示方式

border-box：在元素盒子内部裁剪背景，默认值，背景绘制时会裁剪边框之外的内容(可以认为不裁剪)
padding-box：在内边距盒子内部裁剪背景，背景绘制时会裁剪掉边框内的背景。
content-box：在内容盒子内部裁剪背景，背景绘制时会裁剪掉边框和内边距的背景，只保留内容部分背景
text:只在文本内容上显示背景，该属性目前有兼容问题需要做兼容处理
        -webkit-background-clip:text;
    这样只在文字后面显示背景，但是如果文字设置了颜色，就会覆盖背景，没有任何效果，这时设置文本颜色透明
        color:transparent;
    可以做到彩色的颜色幻化的文字效果

background：

符合顺序：color image repeat attachment position/size origin clip
颜色，背景图片，平铺方式，是否滚动，位置定位，背景尺寸，绘制背景，裁剪背景
同时有背景定位和背景尺寸时两个数据之间要用“/”隔开，其他用空格隔开