标签：box 盒子 模型 边框 background border image CSS 属性
一.盒子模型的相关属性
1.边框属性
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 边框样式 | border-style：上边 【右边 下边 左边】； | none 无（默认），solid 单实线，dashed 虚线，dotted 点线，double 双实线 |
| 边框宽度 | border-swidth：上边 【右边 下边 左边】； | 像素值 |
| 边框颜色 | border-color：上边 【右边 下边 左边】； | 颜色值，#十六进制，rgb(r,g,b), |
| 综合设置边框 | border：四边宽度 四边样式 四边颜色 | |
| 圆角边框 | border-radius：水平半径参数/垂直半径参数 | 像素值或百分比 |
| 图片边框 | border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式 |
2.图片边框
| 属性 | 说明 |
|---|---|
| border-image-soursse | 指定图片路径 |
| border-image-slice | 指定边框图像顶部，右部，底部，左侧内测偏移 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离 |
| border-image-repeat | 指定背景图片的平埔方式 |
二.边框属性
1.内边距
1.padding-top:上边距离；
2.padding-left:左边距离；
3.padding-right：右边距离；
4.padding-bottom：底部距离；
5.padding：上内边距 【右内 下内 左内】；
2.外边距
1.margin-top:上边距离；
2.margin-left:左边距离；
3.margin-right：右边距离；
4.margin-bottom：底部距离；
5.margin：上内边距 【右内 下内 左内】；
3.box-shadow属性
box-shadow:像素值1，像数值2，像素值3 像素值4 颜色值 阴影类型；| 参素值 | 说明 |
|---|---|
| 像素值1 | 表示元素水平阴影位置，必选 |
| 像素值2 | 表示元素垂直阴影位置，必选 |
| 像素值3 | 阴影模糊半径，可选 |
| 像素值4 | 阴影扩展半径，不可为负，可选 |
| 颜色值 | 阴影颜色 可选 |
| 阴影类型 | 内阴影(inset)/外阴影(默认)，可选 |
4.box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包括元素的内边距和边距，其基本语法格式如下：
box-sizing:content-box/border-box;1.content-box：浏览器对盒子模型的解释遵循w3c标准，当定义width和height时，它的参数值不包括border和padding。
2.border-box：当定义width和height时，border和padding的参数值被包括在width和height之内。
三.背景属性
1.背景与图片不透明度的设置
1.RGBA模式
rgba(r,g,b,alpha);alpha参数是一个介于0.0和1.0之间的数字。
2.opacity属性
opacity:opacityValue;opacity用于定义元素的不透明度，介于0~1之间。
3.设置背景图片片平铺
1.repeat：沿水平与垂直两个方向平铺（默认值）。
2.no-repeat：不平铺。
3.repeat-x：只沿水平方向平铺。
4.repeat-y：只沿垂直方向平铺。
5.设置背景图片的位置
body{
background-image：url(图片地址);
background-repeat:no-repeat;
background-position:right top;
}6.设置背景图像固定
1.scroll：图像随页面元素一起滚动（默认值）。
2.fixed：图像固定在屏幕上，不随页面元素滚动。
background-attachment：fixed；7.设置背景图像的大小
background-size:属性值1 属性值2;| 属性值 | 说明 |
|---|---|
| 像素值 | 设置背景图像的高和宽，一宽二高，如果写一个，第二个默认为auto。 |
| 百分比 | 以父元素的百分比来设置背景图像的宽和高。同上。 |
| cover | 把背景图像扩展至足够大，是北京图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域。 |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
8.设置背景的显示区域
background-origin:属性值;1.padding-box:背景图像相对于内边距区域来定义。
2.border-box：背景图像相对于边框来定位。
3.content-box：背景图像相对于内容来定位。
9.设置背景图像的裁剪区域
background-clip:属性值;1.border-box：默认值，从边框区域向外裁剪。
2.padding-box：从内边距区域向外裁剪。
3.content-box：从内容区域向外裁剪。
四.CSS3渐变属性
1.线性渐变
baackground-image:linear-gradient(渐变角度，颜色值1，颜色值2，颜色值n);渐变角度：
是指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或”to”加“left" "right" "top" "bottom"
2.径向渐变
background-image:radial-gradient(渐变形状 圆心位置，颜色值1，颜色值n);3.重复线性渐变
background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值n);4.重复径向渐变
background-image:repeating-radial-gradient(渐变角度，颜色值1，颜色值n);标签：box,盒子,模型,边框,background,border,image,CSS,属性 来源： https://blog.csdn.net/m0_54202121/article/details/120601952
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。