【css】盒子模型常用属性（内外边距及边框 盒子阴影）

边框

边框颜色 border-color

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
border-color	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
border-color	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
border-color	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

边框粗细 border-width

• thin
• medium
• thick
• 像素值

border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式 border-style

• none：默认，无边框
• hidden：
• dotted：点线边框
• dashed：虚线边框
• solid：实线边框
• double：两个边框，两个边框的宽度和 border-width 的值相同

border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-style: solid; 
border-style: solid dotted;
border-style: solid dotted dashed;
border-style: solid dotted dashed double;

简写 border

同时设置边框的颜色、粗细和样式

border:1px solid #3a6587;
border: 1px dashed red;

圆角边框

border-radius: 20px  10px  50px  30px;
/* 四个属性值按顺时针排列 */

/*利用border-radius属性制作圆形的两个要点
1.元素的宽度和高度必须相同
2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
*/
div{
    width: 100px;
    height: 100px;
    border: 4px solid red;
    border-radius: 50%;
}
/*利用border-radius属性制作半圆形的两个要点
1.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
2.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
*/
div {
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 50px 50px 0 0;
}
/*利用border-radius属性制作扇形遵循“三同，一不同”原则
1.“三同”是元素宽度、高度、圆角半径相同
2.“一不同”是圆角取值位置不同
*/
div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50px 0 0 0;
}

内外边距

外边距 margin

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

/* 网页居中对齐 */
margin:0px  auto;

网页居中对齐的必要条件

• 块元素
• 固定宽度

内边距 padding

padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

盒子模型总尺寸 = border + padding + margin + 内容宽度

box-sizing

box-sizing：content-box  |  border-box  |  inherit;
/* 
content-box 默认值，盒子的总尺度
border-box 盒子的宽度或高度等于元素内容的宽度或高度（往里缩 消除padding 和 border）
inherit 元素继承父元素的盒子模型模式
*/

外边距–边框–内边距–内容–内边距–边框–外边距

盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;

• inset：阴影类型内阴影
• x-offset：X轴位移，指定阴影水平位移量
• y-offset：Y轴位移，用来指定阴影垂直位移量
• blur-radius：阴影模糊半径阴影向外模糊的模糊范围
• color：阴影颜色，定义绘制阴影时所使用的颜色