CSS 简明教程 - 边框属性

yufei       2 年, 4 月 前       382

我们可以使用 CSS 边框属性来设置 HTML 元素的边框颜色,边框样式和边框宽度

有三种常见的 CSS 边框属性

属性 说明
border-color 设置边框的颜色
border-style 设置边框的样式,可选值有 soliddasheddouble
border-width 设置边框的宽度

边框样式 border-style

我们可以使用 border-style 属性来定义 HTML 元素的边框样式,它是三个边框属性中最重要的一个

border-style 属性定义了 10 种不同的 非继承样式,包括 none

样式 说明
none 定义无边框
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突
dotted 定义点状边框。在大多数浏览器中呈现为实线
dashed 定义虚线。在大多数浏览器中呈现为实线
solid 定义实线
double 定义双线。双线的宽度等于 border-width 的值
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值
inset 定义 3D inset 边框。其效果取决于 border-color 的值
outset 定义 3D outset 边框。其效果取决于 border-color 的值
inherit 规定应该从父元素继承边框样式

border-style 属性可以有一到四个值 ( 对于 顶部边框右边框底部边框左边框 )

下面的代码是一个完整的例子

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

边框宽度 border-width

我们可以使用 CSS border-width 属性来定义 HTML 元素的边框宽度

指定宽度有两种方法

  1. 指定长度值,例如 2px0.1em ( 以 pxptcmem 等为单位 )
  2. 使用关键字,例如 thickmedium ( 默认 ) 和 thin

注意:由于关键字 thickmediumthin 没有指定特定的宽度值,因此不同的浏览器可能会显示不同的宽度

你可以使用不同的浏览器尝试以下示例

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

你可以按照 上-右-下-左 的顺序设置元素边框的每一边

p {
    border-style: solid;
    border-width: 15px 5px 15px 5px;
}

当然,上面的示例也可以简写为

p {
    border-style: solid;
    border-width: 15px 5px;
}

你还可以使用以下属性分别设置边框每边的宽度

因此,上面的示例又可以改写为

p {
    border-style: solid;
    border-top-width: 15px;
    border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;
}

边框颜色 border-color

我们可以使用 border-color 属性来设置 HTML 元素的边框四边的颜色

我们可以使用任何类型的颜色值,例如颜色名称,十六进制值和 RGB 值作为 border-color 属性的值

我们同样可以按照 上-右-下-左 的顺序为元素设置边框每一边的颜色

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}

我们还可以使用下面的属性分别设置边框每侧的颜色

例如,如果我们要为 <h1> 元素指定纯黑色边框,但右侧是纯红色,那么我们可以像这样定义 CSS 规则

h1 {
    border-style: solid;
    border-color: black;
    border-right-color: red;
}

CSS 边框属性 - 简写属性

在上面的例子中,我们了解了可以用来设置 HTML 元素的边框的三个 CSS 边框属性,为了简写代码,我们可以将这三个属性整合到一个属性 border 中,例如

p {
    border: 5px solid red;
}

我们还可以使用简写属性来定义每个边框的样式,例如,我们可以像这样定义左侧边框

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

我们还可以以同样的方式定义右侧边框,顶部边框和底部边框的样式

边框圆角属性 border-radius

border-radius 属性在 CSS3 中定义,它可以用来实现圆角边框

例如

p {
    border: 2px solid red;
    border-radius: 5px;
}

但是,border-radius 属性并不被所有的浏览器支持,一些老旧的浏览器,如 ( IE6,7,8及更早版本 ) ,除此之外,所有的现代浏览器都支持 border-radius 属性

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.