W3School-CSS 边框(border)实例

CSS 边框(border)实例

CSS 实例

CSS 背景实例
CSS 文本实例
CSS 字体(font)实例
~~CSS 边框(border)实例~~
CSS 外边距 (margin) 实例
CSS 内边距 (padding) 实例
CSS 列表实例
CSS 表格实例
轮廓（Outline）实例
CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
CSS 伪元素 (Pseudo-elements)实例

01所有边框属性在一个声明之中

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>01所有边框属性在一个声明之中</title>
		<style type="text/css">
			body{
			    	background-color: #FF985E;
			    }
			    p{
			    	border: medium double rgb(94,234,255);
			    }
		</style>
	</head>

	<body>
		<p>编点啥呢，真费脑筋啊！</p>
	</body>

</html>

02设置四边框样式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02设置四边框样式</title>
		<style type="text/css">
		    p.dotted{border-style: dotted;}
		    p.dashed{border-style: dashed;}
		    p.solid{border-style: solid;}
		    p.double{border-style: double;}
		    p.groove{border-style: groove;}
		    p.ridge{border-style: ridge;}
		    p.inset{border-style: inset;}
		    p.outset{border-style: outset;}
		</style>
	</head>
	<body>
		<p class="dotted">我是dotted border</p>
		<p class="dashed">我是dashed border</p>
		<p class="solid">我是solid border</p>
		<p class="double">我是double border</p>
		<p class="groove">我是groove border</p>
		<p class="ridge">我是ridge border</p>
		<p class="inset">我是inset border</p>
		<p class="outset">我是outset border</p>
	</body>
</html>

03设置每一边的不同边框

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03设置每一边的不同边框</title>
		<style type="text/css">
		    p.soliddouble{border-style:solid double;}
		    p.doublesolid{border-style:double solid;}
		    p.groovedouble{border-style:groove double;}
		    p.three{border-style:solid double groove;}
		</style>
	</head>
	<body>
		<p class="soliddouble">两个参数：上下左右</p>
		<p class="doublesolid">两个参数：上下左右</p>
		<p class="groovedouble">两个参数：上下左右</p>
		<p class="three">三个参数：上左右下</p>
	</body>
</html>

04所有边框宽度属性在一个声明之中

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>04所有边框宽度属性在一个声明之中</title>
		<style type="text/css">
			body {
				background-color: #FFEFBF;
			}
			
			p.one {
				border-style: solid;
				border-width: 5px;
			}
			
			p.two {
				border-style: solid;
				border-width: thick;
			}
			
			p.three {
				border-style: solid;
				border-width: 5px 10px;
			}
			
			p.four {
				border-style: solid;
				border-width: 5px 10px 1px;
			}
			
			p.five {
				border-style: solid;
				border-width: 5px 10px 1px medium;
			}
		</style>
	</head>

	<body>
		<p class="one">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
		<p class="two">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
		<p class="three">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
		<p class="four">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
		<p class="five">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
	</body>

</html>

05设置四个边框的颜色

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>05设置四个边框的颜色</title>
		<style type="text/css">
			body {
				background-color: #B2C5FF;
			}
			
			p.one {
				border-style: solid;
				border-color: #C3DB51;
			}
			
			p.two {
				border-style: solid;
				border-color: #C3DB51 #D863F2;
			}
			
			p.three {
				border-style: solid;
				border-color: #C3DB51 #D863F2 #E0E0F8;
			}
			
			p.four {
				border-style: solid;
				border-color: #C3DB51 #D863F2 #E0E0F8 #7787C5;
			}
		</style>
	</head>

	<body>
		<p class="one">One-colored border!</p>

		<p class="two">Two-colored border!</p>

		<p class="three">Three-colored border!</p>

		<p class="four">Four-colored border!</p>

	</body>

</html>

06所有下边框属性在一个声明中

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>06所有下边框属性在一个声明中</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-bottom: thick dotted #FF0000;
			}
		</style>
	</head>

	<body>
		<p>对对对这个人就是就是那个叫什么隆力奇！</p>
	</body>

</html>

07设置下边框的颜色

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>07设置下边框的颜色</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-bottom-color: #FF0000;
			}
		</style>
	</head>

	<body>
		<p>对对对就设置一个瞎编筐</p>
	</body>

</html>

08设置下边框的样式

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>08设置下边框的样式</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
			}
			
			p.none {
				border-bottom-style: none;
			}
			
			p.dotted {
				border-bottom-style: dotted;
			}
			
			p.dashed {
				border-bottom-style: dashed;
			}
			
			p.solid {
				border-bottom-style: solid;
			}
			
			p.double {
				border-bottom-style: double;
			}
			
			p.groove {
				border-bottom-style: groove;
			}
			
			p.ridge {
				border-bottom-style: ridge;
			}
			
			p.inset {
				border-bottom-style: inset;
			}
			
			p.outset {
				border-bottom-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="none">No bottom border.</p>
		<p class="dotted">A dotted bottom border.</p>
		<p class="dashed">A dashed bottom border.</p>
		<p class="solid">A solid bottom border.</p>
		<p class="double">A double bottom border.</p>
		<p class="groove">A groove bottom border.</p>
		<p class="ridge">A ridge bottom border.</p>
		<p class="inset">An inset bottom border.</p>
		<p class="outset">An outset bottom border.</p>
	</body>

</html>

09设置下边框的宽度

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>09设置下边框的宽度</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p.one {
				border-style: solid;
				border-bottom-width: 15px;
			}
			
			p.two {
				border-style: solid;
				border-bottom-width: thin;
			}
		</style>
	</head>

	<body>
		<p class="one">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
		<p class="two">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
	</body>

</html>

10所有左边框属性在一个声明之中


<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>10所有左边框属性在一个声明之中</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-left: thick double #FF0000;
			}
		</style>
	</head>

	<body>
		<p>我又来了哈哈😄</p>
	</body>

</html>

11设置左边框的颜色

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>11设置左边框的颜色</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-left-color: #FF0000;
			}
		</style>
	</head>

	<body>
		<p>我又来了哈哈😄</p>
	</body>

12设置左边框的样式

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>12设置左边框的样式</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
			}
			
			p.none {
				border-left-style: none;
			}
			
			p.dotted {
				border-left-style: dotted;
			}
			
			p.dashed {
				border-left-style: dashed;
			}
			
			p.solid {
				border-left-style: solid;
			}
			
			p.double {
				border-left-style: double;
			}
			
			p.groove {
				border-left-style: groove;
			}
			
			p.ridge {
				border-left-style: ridge;
			}
			
			p.inset {
				border-left-style: inset;
			}
			
			p.outset {
				border-left-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="none">No left border.</p>
		<p class="dotted">A dotted left border.</p>
		<p class="dashed">A dashed left border.</p>
		<p class="solid">A solid left border.</p>
		<p class="double">A double left border.</p>
		<p class="groove">A groove left border.</p>
		<p class="ridge">A ridge left border.</p>
		<p class="inset">An inset left border.</p>
		<p class="outset">An outset left border.</p>
	</body>

</html>

13设置左边框的宽度

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>13设置左边框的宽度</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p.one {
				border-style: solid;
				border-left-width: 15px;
			}
			
			p.two {
				border-style: solid;
				border-left-width: thin;
			}
		</style>
	</head>

	<body>
		<p class="one">"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
		<p class="two">"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
	</body>

</html>

14所有右边框属性在一个声明之中

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>14所有右边框属性在一个声明之中</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-right: thick double #FF0000;
			}
		</style>
	</head>

	<body>
		<p>我再次来了哈哈🐶</p>
	</body>

</html>

15设置右边框的颜色


<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>15设置右边框的颜色</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-right-color: #FF0000;
			}
		</style>
	</head>

	<body>
		<p>我再次来了哈哈🐶</p>
	</body>

</html>

16设置右边框的样式

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>16设置右边框的样式</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p.dotted {
				border-right-style: dotted;
			}
			
			p.dashed {
				border-right-style: dashed;
			}
			
			p.solid {
				border-right-style: solid;
			}
			
			p.double {
				border-right-style: double;
			}
			
			p.groove {
				border-right-style: groove;
			}
			
			p.ridge {
				border-right-style: ridge;
			}
			
			p.inset {
				border-right-style: inset;
			}
			
			p.outset {
				border-right-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="dotted">A dotted border</p>

		<p class="dashed">A dashed border</p>

		<p class="solid">A solid border</p>

		<p class="double">A double border</p>

		<p class="groove">A groove border</p>

		<p class="ridge">A ridge border</p>

		<p class="inset">An inset border</p>

		<p class="outset">An outset border</p>

	</body>

</html>

17设置右边框的宽度

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>17设置右边框的宽度</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p.one {
				border-style: solid;
				border-right-width: 15px;
			}
			
			p.two {
				border-style: solid;
				border-right-width: thin;
			}
		</style>
	</head>

	<body>
		<p class="one">"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
		<p class="two">"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
	</body>

</html>

18所有上边框属性在一个声明之中

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>18所有上边框属性在一个声明之中</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-top: thick double #FF0000;
			}
		</style>
	</head>

	<body>
		<p>大冬天被🐦憋醒！</p>
	</body>

</html>

19设置上边框的颜色

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>19设置上边框的颜色</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
				border-top-color: #FF0000;
			}
		</style>
	</head>

	<body>
		<p>大冬天被🐦憋醒！</p>
	</body>

</html>

20设置上边框的样式

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>20设置上边框的样式</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p {
				border-style: solid;
			}
			
			p.none {
				border-top-style: none;
			}
			
			p.dotted {
				border-top-style: dotted;
			}
			
			p.dashed {
				border-top-style: dashed;
			}
			
			p.solid {
				border-top-style: solid;
			}
			
			p.double {
				border-top-style: double;
			}
			
			p.groove {
				border-top-style: groove;
			}
			
			p.ridge {
				border-top-style: ridge
			}
			
			p.inset {
				border-top-style: inset;
			}
			
			p.outset {
				border-top-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="none">No top border.</p>
		<p class="dotted">A dotted top border.</p>
		<p class="dashed">A dashed top border.</p>
		<p class="solid">A solid top border.</p>
		<p class="double">A double top border.</p>
		<p class="groove">A groove top border.</p>
		<p class="ridge">A ridge top border.</p>
		<p class="inset">An inset top border.</p>
		<p class="outset">An outset top border.</p>

	</body>

</html>

21设置上边框的宽度


<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>21设置上边框的宽度</title>
		<style type="text/css">
			body {
				background-color: #DAFECB;
			}
			
			p.one{
				border-style: solid;
				border-top-width: 30px;
			}
			
			p.two{
				border-style: solid;
				border-top-width: thin;
			}
		</style>
	</head>

	<body>
		<p class="one">"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
		<p class="two">"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
	</body>

</html>

CSS边框实例总结

posted @ 2015-12-24 15:41 IamHoey 阅读(832) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

IamHoey

W3School-CSS 边框(border)实例

CSS 边框(border)实例

CSS 实例

01所有边框属性在一个声明之中

02设置四边框样式

03设置每一边的不同边框

04所有边框宽度属性在一个声明之中

05设置四个边框的颜色

06所有下边框属性在一个声明中

07设置下边框的颜色

08设置下边框的样式

09设置下边框的宽度

10所有左边框属性在一个声明之中

11设置左边框的颜色

12设置左边框的样式

13设置左边框的宽度

14所有右边框属性在一个声明之中

15设置右边框的颜色

16设置右边框的样式

17设置右边框的宽度

18所有上边框属性在一个声明之中

19设置上边框的颜色

20设置上边框的样式

21设置上边框的宽度

CSS边框实例总结

公告