1. 背景
background-color (背景颜色)
属性值: 颜色 指定颜色的值 transparent 背景色为透明色
background -image(背景图片)
属性值: none 取消背景图片设置 URL 背景图片的路径
background- repeat(背景平铺方式)
属性值: no-repeat 禁止平铺图像 repeat-x 水平方向平铺 repeat-y 竖直方向平铺 repeat 水平和竖直方向同时平铺
background-position(背景图片的位置)
属性值: top 将背景图片定位到元素顶部 left 将背景图片定位到元素左部 right 将背景图片定位到元素右部 bottom 将背景图片定位到元素底部 center 将背景图片定位到元素的中间 数字+px 将背景图片偏移指定的距离 数字+% 将背景图片偏移指定的百分比(相对于父控件) 该属性能多个值同时设定,例如要定位到右下角则有:“bottom,right”
background-size(背景大小)
属性值: auto 默认值,图像以原尺寸显示大小 cover 等比例缩放图片,使得图片图片至少能覆盖容器,但有可能超出容器 contain 等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合 数字+px 指定长度的大小 数字+% 指定大小为相对于父控件的大小
background-attachment(背景滚动方式)
属性值: scroll 默认值,背景固定在元素上,不进行滚动 fixed 背景固定在视窗上,拖动滚动条背景不动,水印效果
background-origin(背景图片起始位置)
属性值: border-box 在元素盒子内部绘制背景图片 padding-box 在内边距盒子内部绘制背景图片 margin-box 在外边距盒子内部绘制背景图片 content-box 在内容盒子内部绘制背景图片
background-clip(背景图片的剪裁)
属性值: border-box 在元素盒子内部剪裁背景 padding-box 在内边距盒子内部剪裁背景 content-box 在内容盒子内部剪裁背景图片
background属性简写形式:
属性顺序: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]
2. 边框
1. 声明边框 :
border-width 边框宽度 :
数字+px 指定边框宽度宽度
数字+% 指定边框宽度为相对于父控件的百分比
thin 细边框
medium 中等边框
thick 厚边框
border-style 边框样式:
样式名称 规定好的边框样式
none 没有边框
dashed 破折线边框
dotted 圆点线边框
double 双线边框
groove 槽线边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框
圆角边框:
border-top-left-radius 左上角圆角边框的半径 border-top-right-radius 右上角圆角边框的半径 border-bottom-left-radius 左下角圆角边框的半径 border-bottom-right-radius 右下角圆角边框的半径 border-radius 四条边角 属性值均为: 数字+px 指定大小的长度 数字+% 指定相对于父控件的长度