CSS——＞边框样式

最新推荐文章于 2022-02-28 15:26:24 发布

省级干饭王

最新推荐文章于 2022-02-28 15:26:24 发布

阅读量270

点赞数

分类专栏： css 笔记

本文链接：https://blog.csdn.net/qq_55016379/article/details/117624583

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

边框样式

边框样式简介

在浏览页面过程中，边框无处不在，文字边框，图片边框等等

在设置边框时，我们需要考虑一下这几个方面：

边框的宽度
边框的外观（是实线还是虚线）
边框的颜色

上述的几个元素的顺序也是在简化定义边框格式时的顺序

边框样式属性

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

整体样式

边框的属性

1.border-width

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

2.border-style

border-style属性用于定义边框的外观

属性值	说明
none	无样式
dashed	虚线
soild	实线

除了上述比较常用的取值，还有hidden、dotted、double等取值

3.border-color

border-color属性用于定义边框的颜色，取值可以是“关键字”或“十六进制RGB值”

代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框样式</title>
		<style type="text/css">
			div
			{
				width: 100px;
				height: 30px;
			}
			#div1
			{
				border-width: 1px;
				border-style: dashed;
				border-color: aquamarine;
			}
			#div2
			{
				border-width:1px;
				border-style:solid;
				border-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="div1">这是虚线边框</div>
		<div id="div2">这是实现边框</div>
	</body>
</html>

局部样式

一个元素有四条边，我们可以把这四条边提取出来，逐个定义

1.上边框：border-top

2.下边框：border-bottom

3.左边框：border-left

4.有边框：border-right

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部样式</title>
		<style type="text/css">
			div
			{
				width: 100px;
				height: 60px;
				border-top:2px solid #00FFFF;
				border-bottom:2px solid #7FFFD4;
				border-right:2px solid chartreuse;
				border-left:2px solid hotpink
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

省级干饭王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——＞边框样式

边框样式边框样式简介在浏览页面过程中，边框无处不在，文字边框，图片边框等等在设置边框时，我们需要考虑一下这几个方面：边框的宽度边框的外观（是实线还是虚线）边框的颜色上述的几个元素的顺序也是在简化定义边框格式时的顺序边框样式属性属性说明border-width边框的宽度border-style边框的外观border-color边框的颜色整体样式边框的属性1.border-widthborder-width属性用于定义边框的宽度，取值是一个
复制链接

扫一扫