8.css边框_html/css_WEB-ITnose

其实，与其将css盒模型称为是一个盒子，我更愿意将其称为卡片，或者是图画。因为相对于盒子的三维特效，网页的元素更像是二维的图画。而我们之间对元素尺寸之类的调整，更像是对画布的调整。

　　但是，就像我可以为一幅画配一个画框一样，我也可以为元素设置一个边框。

属性 值 说明 CSS 版本 border-width 长度值 设置边框的宽度，可选 1 border-style 样式名称 设置边框的样式，必选 1 border-color 颜色值 设置边框的颜色，可选 1

　　这三个属性值，只有 border-style 是必须声明，才可以出现边框。而其他两个属性会出现默认值，宽度默认为3px，颜色默认为黑色。

/*简单设置*/div {     border-style: solid; }/*完整设置*/div {     border-style: solid;     border-width: 2px;     border-color: red; } 

　　注意:当我为画镶嵌一个画框后，把它拿到美术馆（也就是网页）去展览的是时候，美术馆里的参观者看到的画的大小就不再是画布的大小了，而是画布加上边框的。而这里边框的设置是针对其中的一条边的，也就是真正的宽度和高度应该变成：画布的+边框一条边的*2。

　　下面总结了各属性的详细用法。

1.边框的宽度

值 说明 长度值 CSS 长度值：比如 px、em 等 百分数 直接设置百分数：1、2、3 等 thin 使用长度名称的预设宽度。这三个值的具体意义由浏 览器来定义，从小到大依次增大 medium thick

2.边框的样式

值 说明 none 没有边框 dashed 破折线边框 dotted 圆点线边框 double 双线边框 groove 槽线边框 inset 使元素内容具有内嵌效果的边框 outset 使元素内容具有外凸效果的边框 ridge 脊线边框 solid 实线边框

3.边框的颜色

　　边框的颜色其实没有什么特别的值，其设置方法可以参考 css的颜色 这篇博客。

4.分别定制

　　以上的设置方法都是针对四条边的，相当于买了一套边框。但是，我们可以按照自己的需求分别对四条边进行定制。

属性 说明 CSS 版本

border-top-width

border-top-style

border-top-color

定义顶端 1

border-bottom-width

border-bottom-style

border-bottom-color

定义底部 1

border-left-width

border-left-style

border-left-color

定义左侧 1

border-right-width

border-right-style

border-right-color

定义右边 1

/*只要其中的一条边*/div {     border-top-style: solid;     border-top-width: 10px;     border-top-color: red; } 

5.简写设置

　　为了提高销量，商家还提高了快速下单服务， 当四条变都一致，那么没必要分写成三句样式，直接通过简写即可 ：

属性 值 说明 CSS 版本 border 设置四条边的边框 1 border-top 只设置上边框 border-bottom 只设置下边框 border-left 只设置左边框 border-right 只设置右边框

/*简写形式四条边设置 */div {     border: 10px solid red; } 

6.圆角边框

　　虽然商家提供了各种样式的边框，但是这些边框都是方方正正的，为了满足顾客的要求，商家又去拿了一批新货，开始提供圆角边框了。

属性 值 说明 CSS 版本 border-radius 长度值或百分数 四条边角 3 border-top-left-radius 左上边角 border-top-right-radius 右上边角 border-bottom-left-radius 左下边角 border-bottom-right-radius 右下边角

/*设置圆角矩形*/div {     border: 10px solid red;     border-radius: 10px; }/*四条边分别设置*/div {     border: 10px solid red;     border-radius: 10px 20px 30px 40px; } 

查看更多关于8.css边框_html/css_WEB-ITnose的详细内容...