HTML5第六章 盒子模型

一、边框

border-color：边框颜色

p{
    border-color:red;/*写一个颜色表示四边都是一种颜色。写两个颜色第一个表示上下的颜色第二个表示左右的颜色。写三个第一个表示上颜色第二个左右颜色第三个下颜色。四个颜色顺序式上右下左！*/
}

border-top-color：上边框颜色（top上，right右，bottom下，left左，）

border-width:边框粗细（top上，right右，bottom下，left左同颜色顺序一样）

border-style：边框样式

dashed：虚线

solid：实线

border简写

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

margin：外边距（top上，right右，bottom下，left左同颜色顺序一样）

margin：0px auto：网页居中对齐

padding：内边距（top上，right右，bottom下，left左同颜色顺序一样）

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

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

二、圆角边框

border-radius:圆角边框

p{
    border-radius: 20px  10px  50px  30px/*顺时针排列，左上右上右下左下*/
}

三、盒子阴影

box-shadow：盒子阴影

ul li:hover{
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);
}