H5W3
当前位置:H5W3 > HTML5 > 正文

CSS 边框样式

我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。

关于边框样式的四个属性:

属性 描述
border-width 设置边框的宽度
border-style 设置边框的样式
border-color 设置边框的颜色
border 在一个声明中设置所有的边框属性

border-width

border-width 属性用于设置边框的宽度,也就是边框的粗细。

常用属性值如下所示:

属性值 描述
thin 定义细的边框
medium 默认,定义中等的边框
thick 定义粗的边框
length 自定义边框的宽度,单位为像素px
inherit 规定应该从父元素继承边框宽度

我们一般会使用 length 作为 border-width 属性的属性值,即设置边框的粗细为多少像素,例如 1px、2px、3px 等。border-width 属性可以同时为所有边框设置宽度,也可以单独地为每个边框设置宽度。

示例:

为上、右、下、左四个边框分别设置边框粗细:

border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;

根据简写属性 border-width,我们也可以直接写成:

border-width:1px 2px 3px 4px;

记住在简写时,为边框设置宽度的顺序为 上、右、下、左,是顺时针顺序。

而当元素的上下边框或左边框的宽度一致时,也可以使用简写,例如上下边框为1px、左右边框为2px,可以写成:

border-width:1px 2px;

border-style

border-style 属性用于设置元素的边框样式。和 border-width 一样,可以同时为四个边框设置边框样式,也可以分别为每个边框单独设置边框样式。

border-style 的属性值有很多个,但是在实际网页制作中,常用属性值有下面四种:

属性值 描述
dotted 定义点状边框
dashed 定义虚线边框
solid 定义实线边框
none 无边框
示例:

例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线:

border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;

可以简写成:

border-style: solid dashed solid dashed;

当元素的上下边框和左右边框样式一致时,也可以写成:

border-style: solid dashed;

border-color

border-color 属性可以用于设置边框颜色。属性值可以是任何合法的颜色值,例如颜色名、十六进制颜色值、RGB颜色值等。

border-color 属性同样可以同时设置四个边框的颜色,也可以单独设置四条边框的颜色。

示例:

例如设置上、右、下、左边框颜色为红黄蓝绿:

border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;

可以简写为:

border-color:red yellow blue green;

border

上面我们讲了 border-width、border-style、border-color 三个属性,但是其实我们在实际应用中,一般不会单独来设置边框宽度或者颜色等,而是直接使用通过 border 简写属性来设置所有的边框属性。

border 属性可以直接设置所有边框的样式,如果要单独设置每个边框的样式则可以使用 border-top、border-right、border-bottom、border-left。

示例:

将下面这个<div> 标签的边框设置成 3像素、虚线、紫色:

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>css学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="http://www.fly63.com/article/detial/9735/index.css">
</head>
<body>
<div>设置一个边框</div>
</body>
</html>

CSS 样式代码:

div{
width: 100px;
height: 100px;
border:3px dashed purple;
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9735

未经允许不得转载:H5W3 » CSS 边框样式

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址