天天看点

CSS基础笔记——边框样式

在浏览网页的过程中,边框样式随处可见。几乎所有的元素都可以定义边框

边框样式有三个属性

CSS基础笔记——边框样式

想要为一个元素定义边框样式,必须要同时设置border-width、border-style、border-color这三个属性才有效果

border-width属性用于定义边框的宽度,取值是一个像素值

border-style属性用于定义边框的外观,常用属性值为

CSS基础笔记——边框样式

 除了上表的取值,还有hidden、dotted、double等等,我只列出了最常用的几个取值

border-color属性用于定义边框的颜色,取值为关键字或十六进制RGB值

想要为一个元素定义边框,我们需要完整的给出这三个属性值,但这种写法代码量过多,CSS为我们提供了一种简写形式

border:1px solid red;
           

局部样式

一个元素其实有四条边,我们可以对某一条边单独设置

1.上边框border-top

2.下边框border-bottom

3.左边框border-left

4.右边框border-right

对于边框样式,不管是整体样式还是局部样式,我们都需要设置三个属性值

当设置border-bottom:0时,表示为去除下边框