CSS边框与背景

CSS边框与背景
一.边框
边框有3个属性
border-width 边框的粗细(默认3px)
border-color 边框的颜色(默认黑色)
border-style 边框的样式
其中width与color有默认值
所以只需要给出边框的style即可设置一个边框
边框的样式有:solid实线 dashed破折线 dotted圆点线 double双线
groove槽线 inset使元素具有内嵌效果的边框 outset使元素具有外凸效果的边框 ridge脊线
二.圆角边框
border-radius:r;
r为圆角的半径
三.背景
1.background-color
背景的颜色 
可选择的:自定义的颜色 transparent(设置背景颜色为透明的)

2.background-image
背景的图片
示例:backgroun-image:url("路径")

3.background-repeat
背景的平铺的方式
参数可以是以下四个值中的一个:
repeat-x 水平平铺
repeat-y  垂直平铺
repeat 水平垂直同时平铺(默认值)
no-repeat 水平垂直都不平铺

4.background-position
设置背景图片的展示位置
top bottom left right 分别对应四个方向
center 正中央
top left 左上(互换位置没关系)
top right 右上(互换位置没关系)
bottom left 左下(互换位置没关系)
bottom right 右下(互换位置没关系)

5.background-size
设置背景图片的大小
可以选择的参数 
auto 图多大就怎么放
cover 等比例缩放背景图片使其至少覆盖容器,有可能超出容器
contain 等比例缩放背景图片,但尽可能使图片显示完全
width height (单位为px,em等) 直接设置背景图片的大小
% 一般常用100% 

6.background-attachment
设置背景图片是否随内容滚动
可选的参数有
scroll(默认) 一起滚动
fixed 不滚动

7.background-origin
设置背景图片绘制的起始位置
可选的参数
border-box 从边框开始绘制
padding-box 从内边距开始绘制
content-box 从内容区域开始绘制

8.background-clip
设置背景图片的裁剪位置
可选的参数 
border-box 从边框位置开始裁剪(如果background-origin是默认的 那么这个属性将体现不出效果)
padding-box 从内边距位置开始裁剪
content-box 从内容区域位置开始裁剪

9.background
简写模式
background:[color][image][repeat][attachment][position]/[size][origin][clip]