HTML边框属性样式

目录

一，什么是盒子模型

二，盒子模型边框的常用属性

边框属性：

border-color（边框颜色）

border-width（边框粗细）

边框样式：

代码示例如下：

border-style：dotted（点虚线）

border-style：dashed（虚线）

border-style：double（双线）

外间距：

内边距

圆角边框：

border-radius：X，Y属性

圆形

边框阴影：

---

一，什么是盒子模型

由图片可以看到，当我们选择一个元素查看时，这个元素会被看成一个盒子，有宽度（width），高度（height），内边距（padding）,外边距（margin）。而一个盒子的边框，内边距，内容区决定大小，而外边距决定盒子的位置

二，盒子模型边框的常用属性

边框属性：

• boder-top-color：上边框颜色
• boder-right-color：右边框颜色
• boder-bottom-color：下边框颜色
• boder-left-color：左边框颜色
• boder-color：四个框为一个颜色
• boder-width：边框粗细

代码示例如下：

border-color（边框颜色）

     border-color: black;

border-width（边框粗细）

border-width:10px;

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

border: 粗细 颜色 边框样式;

   border: 10px black solid;

运行结果如下：

边框样式：

• border-style：none（无）
• border-style：hidden（隐藏）
• border-style：dotted（点虚线）
• border-style：dashed（虚线）
• border-style：solid（实线）
• border-style：double（双线）

代码示例如下：

border-style：dotted（点虚线）

     border: 2px black dotted;

运行结果：

border-style：dashed（虚线）

   border: 2px black dashed;

运行结果如下：

border-style：double（双线）

     border: 2px black double;

运行结果：

外间距：

1：清除默认的外边距

2：给盒子模型设置想要的外边距

3：利用外边距属性让盒子模型居中显示

margin：0px auto；居中对齐

margin-top：顶部

margin-right：右

margin-left：左

margin-bottom：底部

margin:0px auto;

外边距的妙用：网页居中对齐

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

内边距

1：单独设置四条边的内边距

2：一次性设置四条边的内边距

3：外边距的移动会导致DIV里面的内容一起移动，且内部的内容的内边距不变

padding

padding-top：顶部

padding-right：右

padding-left：左

padding-bottom：底部

  

圆角边框：

border-radius：X，Y属性

border-radius: 20px  10px  50px  30px;

结果如下

圆形

利用border-radius属性制作圆形的两个要点
Ø元素的宽度和高度必须相同
Ø圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

 div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

边框阴影：

box-shadow：inset  X  Y  半径  颜色