你的位置:首页 > 网页设计

[网页设计]8.css边框


  其实,与其将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; }