css边框样式

最新推荐文章于 2023-04-08 15:48:50 发布

小李讲源码

最新推荐文章于 2023-04-08 15:48:50 发布

阅读量1.2k

点赞数 2

分类专栏： html&css 文章标签： css html

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50845617

版权

html&css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

边框样式

1.边框类型

border-style:

(1)solid 实线边框
(2)double 双线边框，两条边框线的距离是：border-width

以下边框根据border-color颜色值画出

(3)groove 3D凹槽边框

(4)ridge 菱形边框

(5)inset 3D凹边

(6)outset 3D凸边

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
div
{
	width:200px;
	height:200px;
	background-color:#0F9;
	border-style:solid;
}

2.边框颜色

border-color

设置一个颜色：四个边框用一个颜色画出

设置两个颜色：第一个颜色用于画出上下边框的颜色，第二个颜色用于画出左右边框的颜色//以空格分开

设置四个颜色：按上右下左的顺时针顺序指定四个边框的颜色

我们用设置两个颜色的来举例其余同理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="1.css"/>
<div></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
div
{
	width:200px;
	height:200px;
	background-color:#0F9;
	border-style:solid;
	border-color:#000 #FF0000;
}

3.边框宽度

border-width

把css里面做些修改就可以

@charset "utf-8";
/* CSS Document */
div
{
	width:200px;
	height:200px;
	background-color:#0F9;
	border-style:solid;
	border-color:#000 #FF0000;
	border-width:30px;
}

4.分别设置各个边框

border-top,border-right,border-bottom,border-left

例如：border-top:ridge 10px red;

只要把边框的类型颜色宽度写出来就可以不用考虑顺序

@charset "utf-8";
/* CSS Document */
div
{
	width:200px;
	height:200px;
	background-color:#0F9;
	border-top:ridge 10px red;
}

5.综合声明边框

border

例如：border:groove 20px blue;

@charset "utf-8";
/* CSS Document */
div
{
	width:200px;
	height:200px;
	background-color:#0F9;
	border:groove 20px blue;
}

小李讲源码

关注

2
点赞
踩
6

收藏

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

边框样式1.边框类型 border-style: (1)solid 实线边框 (2)double 双线边框，两条边框线的距离是：border-width 以下边框根据border-color颜色值画出 (3)groove 3D凹槽边框 (4)ridge 菱形边框 (5)inset 3D凹边 (6)outset
复制链接

扫一扫