css 盒子模型

边框（border-color）

 边框粗细

border-width（thin medium thick 像素值）

示例

 边框样式

border-style（none hidden dotted dashed solid double）

示例

 border简写（同时设置边框的颜色、粗细和样式）

 border:1px solid #3a6587;

 border: 1px dashed red;

外边距（margin）

margin-top

margin-right

margin-bottom

margin-left

margin         

外边距的妙用（网页居中对齐）：margin:0px  auto;

网页居中对齐的必要条件： 块元素 固定宽度

内边距（padding）

padding-left

padding-right

padding-top

padding-bottom

padding

盒子型模的尺寸

 box-sizing：语法

 圆角边框：语法：border-radius: 20px  10px  50px  30px;

四个属性值按顺时针排列

使用border-radius制作特殊图形

圆形：利用border-radius属性制作圆形的两个要点

1.元素的宽度和高度必须相同

2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

示例： div{

                     width: 100px;

                    height: 100px;

                    border: 4px solid red;

                    border-radius: 50%;         }

半圆形：利用border-radius属性制作半圆形的两个要点

1.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

2.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

扇形：利用border-radius属性制作扇形遵循“三同，一不同”原则

1.“三同”是元素宽度、高度、圆角半径相同

2.“一不同”是圆角取值位置不同

盒子阴影

 总结