正文
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>
CSS 边框(border)实例
<!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>我又来了哈哈
