CSS3边框 阴影 盒模型和图片裁剪简介

一、边框阴影： box-shadow

里面有4个参数 第一个是水平偏移量 右边为正左边为负，第二个是竖直偏移量，上面为负下面为正 所以两个正就为右下角的两条边！ 第三个参数就是模糊度 当你把模糊度设置了的时候，那么他就会有一定像素的模糊度。第四个参数是偏移量 偏移量为负数的时候那么他就会向图形里面偏移 当为正数的时候就向图形外面偏移，边框阴影不会影响到盒子的布局！内阴影在参数前面加上innter

二、边框图片： 主要就是利用边框的图片来进行一系列变换

1. 获取图片 ： border-image-source： url（）；

2.分割图片： border-image-slice

3.设置图片的宽度： border-image-width

4.设置方式 border-image-repeat： repeat round stretch 这三个平铺方式

border-image-slice可以设置4个参数 来达到变换图形的效果

三、盒模型： css盒模型有两种方式

1.widch只是widch 这是标准模式的 代码:box-sizing:content-box

2.widch是padding+widch+border 这是怪异模式 在ie6以下版本会有

代码：box-sizing:border-box

四、图片裁切：

background：url（）后面可以接 left right topbottom 最后可以加一个逗号

background-size：cover 会以最大边进行说法，另一边同比缩放，铺满容器，超出部分会溢出

contain 会使最小边缩放，另一边同比缩放，不一定会铺满容器，但是会显示全部图片

背景图片的裁剪：其实是三个图片的变换，一个图片移开 然后另一个图片就显示出和背景颜色一样的颜色这样就会当做裁剪了图片

box-sizing：border-box 首先通过这个设置他的图片的大小 还给她加上一个边距，就是以怪异模式进行的

background-clip：content-box这个就是确定背景区域为内容部分不包含padding和border

background-origin：padding-box 这个是以padding为源点 当然默认是以padding为源点的

background-position 这个是确定切割的源点

五、线性渐变

background-image：linear-gradient（）里面接受三个参数 角度 二颜色 三颜色 角度的单位是deg

还有一种单位就是 to 后面接方向就是 例如 to left 就是从右往左 颜色后面还可以接百分比 这样就可以凸显出渐变的效果