标签：3px border 模型 边框 4px margin CSS 属性
CSS盒模型概述：CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。
下图为盒模型模型图。
盒模型各部分说明：
1、content（内容）：盒子的内容，显示文本和图像。
2、padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。
3、margin（外边距）：盒子与邻元素的间距，外边距是透明的。
4、border（边框）：盒子的边框，可以设置边框的宽度、样式、颜色。
盒模型我们可以将它看做是浏览器为页 面中的每个HTML元素生成的透明矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。
一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：上(top)右(right)下(bottom)左(left)
边框相关属性：border-top(上边框) 、border-right(右边框)
border-bottom(下边框) 、border-left(左边框)
内边距相关属性：padding-top(上内边距) 、 padding-right(右内边距)
padding-bottom(下内边距) 、padding-left(左内边距)
外边距相关属性：margin-top(上外边距) 、 margin -right(右外边距)
margin -bottom(下外边距) 、margin -left(左外边距)
简写样式：CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。
例如给某个元素设置上外边距3px、右外边距4px、下外边距5px、左外边距7px。全写形式如下：
color:该属性值控制阴影的颜色。
示例：div{box-shadow:10px 10px 5px #900;}
- p{margin-top: 3px;margin-right: 4px;margin-bottom: 5px;margin-left: 7px;}
简写形式：
- p{margin:3px 4px 5px 6px;}
有时不需要将4个值全部写出，哪一边没写，就用对边的值。例如：
{margin:3px 4px 5px;} 表示上右下左外边距分别为：3px 4px 5px 4px
{margin:3px 4px;} 表示上右下左外边距分别为：3px 4px 3px 4px
{margin:3px;} 表示上右下左外边距分别为：3px 3px 3px 3px
边框有3个相关的属性：宽度（border-width）、样式（border-style）、
颜色（border-color）。
①宽度(border-width):可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值。
②样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双线边框),groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框), outset(3D凸出边框)等文本值。
③颜色(border-color):可以使用任何颜色值，包括RGB,HSL,十六进制颜色值和颜色相关的关键字。
边框样式的用法：
- p{
- border-width:2px;/*边框宽度为2像素*/
- border-style: solid;/*边框样式：实线*/
- border-color: #B139E5;/*边框颜色*/
- }
简写形式：
- p{
- border:2px solid #B139E5;
- /*边框样式：边框宽度2px 边框样式solid 边框颜色#B139E5*/
- }
在CSS3中边框除了前面的3个相关属性外，还新增了3个新的属性分别为：圆角边框(border-radius)、边框阴影(border-shadow)、边框图片(border-image).
④CSS3提供的圆角边框：
border-radius：该属性用于指定圆角边框的圆角半径。
border-top-left-radius:该属性用于指定左上角的圆角半径。
border-top-right-radius:该属性用于指定右上角的圆角半径。
border-bottom-left-radius:该属性用于指定左下角的圆角半径。
border-bottom-right-radius:该属性用于指定右下角的圆角半径。
示例：div{boder-radius:2px 4px;}
//圆角半径顺序：左上角 右上角 右下角 左下角
CSS3新增的box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。
⑤box-shadow:是一个复合属性。它含有以下5个属性值。
hOffset:该属性值控制阴影在水平方向的偏移。
vOffset:该属性值控制阴影在垂直方向的偏移
blur:该属性值控制阴影的模糊程度。
spread-radius:该属性值控制阴影的大小。
如有雷同，实属巧合；如有侵权，请联系下架；
标签：3px,border,模型,边框,4px,margin,CSS,属性 来源： https://blog.csdn.net/weixin_57771027/article/details/117673091
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。