【CSS学习笔记六】边框和轮廓

最新推荐文章于 2022-08-04 15:21:51 发布

思索与猫

最新推荐文章于 2022-08-04 15:21:51 发布

阅读量636

点赞数

分类专栏： CSS学习文章标签： CSS 边框轮廓

本文链接：https://blog.csdn.net/qq_28997735/article/details/98476950

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.边框

1.边框样式

使用border-style属性用来定义边框的样式

参考值：

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值
hidden:隐藏边框

语法：

p.solid
{
	border-style:solid;
}

2.边框厚度

使用border-width 属性为边框指定宽度。
直接指定长度值，单位为px,em
也可以直接使用三个关键字：thick,medium(默认),thin

语法

p.A
{
	border-style:solid;
	border-width:5px;
}
p.B
{
	border-style:solid;
	border-width:thick;
}

3.边框颜色

border-color属性用于设置边框的颜色。
可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
甚至透明：transparent

语法：

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

4.单独设置各边

border-top-style：上边框
border-right-style：右边框
border-bottom-style：底边框
border-left-style：左边框

几种语法：

/*第一种表达*/
p
{
	border-top-style:solid;
	border-right-style:dotted;
	border-bottom-style:dashed;
	border-left-style:double;
}

/*第二种表达,注意顺序，依旧是上右底左*/
p
{
	border-style:solid dotted dashed double;
}

/*第三种表达 上：solid ,右/左：dotted ,底：double*/
p
{
	border-style:solid dotted  double;
}
/*第四种表达 上底：solid, 左右：double*/
p
{
	border-style:solid   double;
}

5.简写

你可以直接在"border"属性中设置（按照顺序）：

border-width
border-style (required)
border-color

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>边框</title>
		<style>
			p.none{border:none;}
			p.dotted{border:5px dotted green;}
			p.dashed{border:5px dashed green;}
			p.solid{border:5px solid green;}
			p.double{border:5px double green;}
			p.groove{border:5px groove green;}
			p.ridge{border:5px ridge green;}
			p.inset{border:5px inset green;}
			p.outset{border:5px outset green;}
			p.hidden{border:hidden;}
			p.ex
			{
				border-style:dotted dashed solid double;
				border-width:10px;
				border-color:green;
			}
		</style>
	</head>
	<body>
		<p class = "none">无边框</p>
		<p class = "dotted">点线边框</p>
		<p class = "dashed">虚线边框</p>
		<p class = "solid">实线边框</p>
		<p class = "double">双边框</p>
		<p class = "groove">凹槽边框</p>
		<p class = "ridge">脊状边框</p>
		<p class = "inset">嵌入边框</p>
		<p class = "outset">外凸边框</p>
		<p class = "hidden">隐藏边框</p>
		<p class = "ex">上方是点线，<br/>右边是虚线，<br/>底边是实线，<br/>左边是双线</p>
	</body>
</html>

结果：
在这里插入图片描述

二.轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

其用法与边框相同，把border替换为outline就可以了。

需要注意的地方：
轮廓并不能像边框一样单独设置各边

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>轮廓</title>
		<style>
			p.none
			{
				border:1px solid red;
				outline:none;
			}
			p.dotted
			{
				border:1px solid red;
				outline:5px dotted green;
			}
			p.dashed
			{
				border:1px solid red;
				outline:5px dashed green;
			}
			p.solid
			{
				border:1px solid red;
				outline:5px solid green;
			}
			p.double
			{
				border:1px solid red;
				outline:5px double green;
			}
			p.groove
			{
				border:1px solid red;
				outline:5px groove green;
			}
			p.ridge
			{
				border:1px solid red;
				outline:5px ridge green;
			}
			p.inset
			{
				border:1px solid red;
				outline:5px inset green;
			}
			p.outset
			{
				border:1px solid red;
				outline:5px outset green;
			}
			p.hidden
			{
				border:1px solid red;
				outline:hidden;
			}
			p.ex
			{
				border:1px solid red;
				outline-style:dotted dashed solid double;
				outline-width:10px;
				outline-color:green;
			}
		</style>
	</head>
	<body>
		<p class = "none">无轮廓</p>
		<p class = "dotted">点线轮廓</p>
		<p class = "dashed">虚线轮廓</p>
		<p class = "solid">实线轮廓</p>
		<p class = "double">双轮廓</p>
		<p class = "groove">凹槽轮廓</p>
		<p class = "ridge">脊状轮廓</p>
		<p class = "inset">嵌入轮廓</p>
		<p class = "outset">外凸轮廓</p>
		<p class = "hidden">隐藏轮廓</p>
		<p class = "ex">上方是点线，<br/>
						右边是虚线，<br/>
						底边是实线，<br/>
						左边是双线，<br/>
						然并软，outline并没有像border一样可以设置各边
		</p>		
	</body>
</html>

结果：
在这里插入图片描述

思索与猫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记六】边框和轮廓

一.边框1.边框样式使用border-style属性用来定义边框的样式参考值：none: 默认无边框dotted: 定义一个点线边框dashed: 定义一个虚线边框solid: 定义实线边框double: 定义两个边框。两个边框的宽度和 border-width 的值相同groove: 定义3D沟槽边框。效果取决于边框的颜色值ridge: 定义3D脊边框。效果取决于边框的颜...
复制链接

扫一扫