CSS 边框(border)实例：
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框属性
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
##################
定义和用法
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
例子 1
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
####################
可能的值
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
##########################
1.所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{border:medium double rgb(250,0,255)}
</style>
</head>
<body>
<p>Some text</p>
</body>
2.设置四边框样式
本例演示如何设置四边框样式。
<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: 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>
3.设置每一边的不同边框
本例演示如何在元素的各边设置不同的边框。
<style class="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style:groove double}
p.three {vorder-style:solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<P class="doublesolid">Some text</P>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
4.所有边框宽度属性在一个声明之中
本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
<style type="text/css">
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"> Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p>
</body>
5.设置四个边框的颜色
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
<style type="text/css">
p.one {border-style:solid;
border-color: #0000ff;}
p.two{border-style:solid;border-color: #ff0000 #0000ff}
p.three{border-style:solid;border-color:#ff0000 #0000ff #00ff00}
p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255)}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two"> Some text</p>
<p class="three"> Some text</p>
<p class="four">Some text</p>
</body>
6.所有下边框属性在一个声明中
本例演示用简写属性来将所有下边框属性设置在同一声明中。
<style type="text/css">
p{border-style:solid;border-bottom:thick dotted #ff0000}
</style>
</head>
<body>
<p>This is some test</p>
</body>
7.设置下边框的颜色
本例演示如何设置下边框的颜色。
<style type="text/css">
p{border-style:solid;border-bottom-color:#ff0000}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
8.设置下边框的样式
本例演示如何设置下边框的样式。
<title>Title</title>
<style type="text/css">
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>
9.设置下边框的宽度
本例演示如何设置下边框的宽度。
<style type="text/css">
p.one{border-style: solid;border-bottom-width:15px}
p.two{border-style:solid;border-bottom-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释</b>“border-nottom-widt” 属性如果单独使用得话是不会起作用的。请首先使用"border-style" 属性来设置边框</p>
<p class="two">Some text.</p>
</body>
10.所有左边框属性在一个声明之中
所有左边框属性在一个声明之中
<style type="text/css">
p{border-style:solid;border-left:thick double #ff0000;}
</style>
</head>
<body>
<P>This is some text</P>
</body>
11.设置左边框的颜色
本例演示如何设置左边框的颜色。
<style type="text/css">
p{border-style:solid;border-left-color: #ff0000}
</style>
</head>
<body>
<p>some text.</p>
</body>
12.设置左边框的样式
本例演示如何设置左边框的样式。
<style type="text/css">
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>
13.设置左边框的宽度
本例演示如何设置左边框的宽度。
<style type="text/css">
p.one{border-style:solid;border-left-width:15px}
p.two{border-style:solid;border-left-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
14.所有右边框属性在一个声明之中
本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。
<style type="text/css">
p {border-style:solid;border-right:thick double #ff0000;}
</style>
</head>
<body>
<p>This is some text </p>
</body>
15.设置右边框的颜色
本例演示如何设置右边框的颜色。
<style type="text/css">
p{border-style:solid;border-right-color:#ff0000}
</style>
</head>
<body>
<p>Some text.</p>
</body>
16.设置右边框的样式
本例演示如何设置右边框的样式。
<style type="text/css">
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>
17.设置右边框的宽度
本例演示如何设置右边框的宽度。
<title>Title</title>
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
18.所有上边框属性在一个声明之中
本例演示用简写属性来将所有上边框属性设置于同一声明之中。
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
19.设置上边框的颜色
本例演示如何设置上边框的颜色。
<style type="text/css">
p.one {border-style:solid;border-right-width:15px}
p.two{border-style:solid;border-right-width:thin}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
20.设置上边框的样式
本例演示如何设置上边框的样式。
<style type="text/css">
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>
21.设置上边框的宽度
本例演示如何设置上边框的宽度。
<style type="text/css">
p.one
{
border-style: solid;
border-top-width: 15px
}
p.two
{
border-style: solid;
border-top-width: thin
}
</style>
</head>
<body>
<p class="one"><b>注释：</b>"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
<p class="two">Some text. Some more text.</p>
</body>
