CSS 边框样式

发布时间:2021-03-19 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了CSS 边框样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

border-width

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

常用属性值如下所示:

属性值描述thin定义细的边框medium默认,定义中等的边框thick定义粗的边框length自定义边框的宽度,单位为像素pxinherit规定应该从父元素继承边框宽度我们一般会使用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="index.css">

</head>

<body>

<div>设置一个边框</div>

</body>

</html>

CSS 样式代码:

div{

width: 100px;

height: 100px;

border:3px dashed purple;

}

总结


以上是前端之家为你收集整理的CSS 边框样式全部内容,希望文章能够帮你解决CSS 边框样式所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。