【Css边界图片 按钮 背景】

一、Css边界图片

border-image-source：url（）
设置边框图片
border-image-slice：把边框图片按照上右下左的顺序切割成九宫格，按照上右下左的顺序设置偏移量，不要设px单位
border-image-width：边框图片宽度，一般和盒子边框一致
border-image-repeat：边框图片平铺
repeat（平铺） round（铺满） stretch（拉伸，默认值）
复合属性：border-image：url（） 28 28 round
图片路径 横向偏移量 纵向偏移量 平铺属性

二、Css3框大小

1.Css3 box-sizing属性：拯救布局

border-box：整个盒子的大小为宽度和高度的尺寸，保证盒子加内边距后不会影响其他盒子的布局简化盒子模型计算尺寸的过程

2.浏览器支持

属性 谷歌 IE 火狐 safri 欧鹏
box-sizing -webkit- -ms- -moz- -webkit- -o-

3.Css3调整尺寸：允许拖拽

resize：both；

三、Css3按钮

1.基本按钮样式

button

2.按钮颜色

background-color

3.按钮大小

font-size

4.圆角按钮

border-radius

5.按钮边框颜色

border

6.鼠标悬停按钮

-webkit-transition-duration
过度持续时间，注意兼容性和单位

7.按钮阴影

box-shadow

8.禁用按钮

opacity：为按钮添加透明度
curser：not-allowed//设置光标不可用

9.按钮宽度

width

四、Css3背景

1.background-image

可以设置多个图片，中间逗号隔开
background-image：url（），url（）；

2.background-size

背景图片尺寸大小
按百分比横向纵向缩放 background-size：100% 100%；
cover：铺满
contain：按原图比例缩放
auto：原图大小（默认值）

3.background-origin

背景起源，背景图片从哪开始显示
content-box：盒子从内容区域开始
padding-box：内边距开始
border-box：从边框区域开始

4.background-clip

背景裁剪：从指定位置开始裁剪
content-box：从内容区域开始裁剪
padding-box：从内边距开始裁剪
border-box：从边框开始