html5input输入框设置无边框_HTML 中的 box-border 盒子边框详解

border 盒子边框

复合属性。设置对象边框的特性。

盒子边框三要素：

① 边框粗细

② 边框样式

③ 边框颜色

语法：border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。

初始 HTML

                  Document            

---

边框样式

使用 border-style 可为盒子边框设置样式，以下示例为实线

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;  }

效果：

可单独针对某一方向设置边框样式

示例 CSS 代码

• 上边：border-top-style: double; (双线)
• 右边：border-right-style: solid; (实线)
• 下边：border-bottom-style: dashed; (虚线)
• 左边：border-left-style: dotted; (点线)

border-style 说明

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 如果border-width等于0，本属性将失去作用。

如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid dashed; }

效果：

border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓

---

边框粗细

使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width: 5px; }

效果

可单独针对某一方向设置边框粗细

示例 CSS 代码

• 上边：border-top-width: 10px; (双线)
• 右边：border-right-width: 10px; (实线)
• 下边：border-bottom-width: 10px; (虚线)
• 左边：border-left-width: 10px; (点线)

border-width 说明

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 如果border-style设置为none或hidden，border-width的使用值将为0。

如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。

比如说下面这段代码，上下2px，右2px，左5px。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width:2px 2px 2px 5px; }

效果：

---

边框颜色

可直接输入

颜色的英文名称

rgb值

十六进制

使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。

 /* CSS代码 */ div{     width: 500px;     height: 50px;     border-style: solid;     border-width:2px 2px 2px 5px;     border-color: red; }

效果：

可单独针对某一方向设置边框颜色

示例 CSS 代码

• 上边：border-top-color: 10px;
• 右边：border-right-color: 10px;
• 下边：border-bottom-color: 10px;
• 左边：border-left-color: 10px;

border-color 说明

• 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
• 如果只提供一个，将用于全部的四边。
• 如果提供两个，第一个用于上、下，第二个用于左、右。
• 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
• 如果border-width等于0或border-style设置为none，本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。

---

border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。

例如：

 /* CSS代码 */ div{     border-top: 5px solid red; }

这段代码指定了上边框的三个属性：粗细、样式、颜色

border-top 包含了：

• border-top-width: 5px;
• border-top-style: solid;
• border-top-color: red;

其他同理

---

教你用 CSS 画个三角形

先来看一个示例

 /* CSS代码 */ div{     width: 100px;     height: 100px;     border-top: 50px solid red;     border-right: 50px solid blue;     border-bottom: 50px solid green;     border-left: 50px solid pink; }

效果：

细心的你，一定发现了 border 的边框四条边交接处是斜角。

此刻我们把盒子的宽高设置为 0

 /* CSS代码 */ div{     width: 0;     height: 0;     border-top: 50px solid red;     border-right: 50px solid blue;     border-bottom: 50px solid green;     border-left: 50px solid pink; }

效果：

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。

为 border-color 指定 transparent 值，使盒子边框颜色变透明

 /* CSS代码 */ div{     width: 0;     height: 0;     border-top: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid green;     border-left: 50px solid transparent; }

效果：

把另外三条边透明之后，就只剩一个三角形了。

---

完

---

部分资料引用自：

• http://caibaojian.com/css3/properties/border/index.htm