Home >Web Front-end >HTML Tutorial >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; }