【前端】CSS（第三篇）-CSDN博客

 /* 边框粗细 */
 border-width: 5px;
 /* 实线 */
 border-style: solid;
 /* 虚线 */
 border-style: dashed;
 /* 点线 */
 border-style: dotted;
 /* 边框颜色 */
 border-color: red;

边框的复合写法：

border: 1px solid red; 
/*没有顺序要求*/

边框分开写法：

border-top: 1px solid red; /* 只设定上边框，其余同理*/

实例：

div {
            width: 200px;
            height: 200px;
            /* 边框粗细*/
            border-width: 5px;
            /* 实线 */
            border-style: solid;
            /* 边框颜色 */
            border-color: blue;
            border-top-color: red;
        }

结果展示：

1.4表格的细线边框

/* 合并相同的边框 */
            border-collapse: collapse;

collapse单词是合并的意思

边框会影响盒子的实际大小：

解决方案：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度

1.6内边距（padding)

边框与内容之间的距离。

内边距复合写法：

            /* 1个值，代表上下左右 */
            padding: 5px;
            /* 2个值，代表上下5像素 左右10像素 */
            padding: 5px 10px;
            /* 3个值，代表上5像素 左右10像素 下20像素 */
            padding: 5px 10px 20px;
            /* 4个值，上5像素 右10像素 下15像素 左20像素 */
            padding: 5px 10px 15px 20px;

内边距（padding）也会影响盒子的实际大小：

如果测量的时候包含了内边距，则需要width/height减去内边距。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

1.7外边距（margin)

盒子与盒子之间的距离。

margin的复合写法与padding代表的意思完全一致。

典型应用：

外边距可以让块级盒子水平居中，但必须满足两个条件：

盒子必须指定了宽度（width)。
盒子左右的外边距都设置为auto。

.header{ width:960px; margin:0 auto; }

行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

1.8外边距合并

1.8.1相邻块元素垂直外边距合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距是取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加margin

1.8.2嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

还有其他方法，比如浮动、固定、绝对定位。

1.9清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

/*CSS的第一行代码*/
* {
    padding:0;    /*清除内边距*/
    margin:0;    /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块级元素就可以了。

二、圆角边框（重点）

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius:10px;

参数值可以为数值或者百分比的形式。
如果是正方形，想要设置为一个圆，将数值修改为高度或者宽度的一半即可，或者直接写50%。
如果是个矩形，设置为高度的一般就可以做圆角矩形。
该属性是一个简写属性，可以跟四个值，分别代表左上、右上、右下、左下。
分开写border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

三、盒子阴影（重点）

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);    
     /*h-shadow v-shadow blur spread color inset*/

注意：

默认的外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占空间，不会影响其他盒子排列。

四、文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

text-shadow: 5px 5px 6px  rgba(0, 0, 0, .3);    
     /*h-shadow v-shadow blur  color */