HTML 盒子模型

目录

边框

外边框

内边距

圆角边框

盒子阴影

---

边框

broder-color 边框颜色

broder-width 边框粗细

border-style 边框样式 dashed虚线 solid实线

简写

border：颜色 粗细 样式（顺序可以调整）

外边框

margin-top

margin-right

margin-bottom

margin-left

margin

注意：网页居中对其 margin:0px auto

内边距

padding-left

padding-right

padding-top

padding-bottom

padding

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

box-sizing：border-box 消除内边距和边框

圆角边框

border-radius:20px 10px 50px 30px
四个属性值按顺时针排列，上右下左
​
制作圆形两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
{
    width:100px
    height:100px
    border:4px solid red;
    border-radius:50%;
}
​
制作半圆形两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
​
制作扇形“三同一不同”
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;
​
inset:阴影类型为内阴影，不加为外阴影
x:X轴位移，指定阴影水平位移量
y:Y轴位移，用来指定阴影垂直位移量
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
color:阴影颜色