css如何设置边框样式？

　　一：border边框线的基本样式

　　边框样式属性指定要显示什么样的边界

　　1.border-style属性

　　none:默认无边框

　　dotted:定义一个点线边框

　　dashed:定义一个虚线边框

　　solid:定义实线边框

　　double:定义两个边框。两个边框的宽度和border-width的值相同

　　groove:定义3D沟槽边框。效果取决于边框的颜色值

　　ridge:定义3D脊边框。效果取决于边框的颜色值

　　inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

　　outset:定义一个3D突出边框。效果取决于边框的颜色值

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>border-style属性</title>

　　<style>

　　.demo{width:500px;height:500px;margin:50pxauto;}

　　p.none{border-style:none;}

　　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;}

　　p.hidden{border-style:hidden;}

　　</style>

　　</head>

　　<body>

　　<divclass="demo">

　　<pclass="none">无边框。</p>

　　<pclass="dotted">虚线边框。</p>

　　<pclass="dashed">虚线边框。</p>

　　<pclass="solid">实线边框。</p>

　　<pclass="double">双边框。</p>

　　<pclass="groove">凹槽边框。</p>

　　<pclass="ridge">垄状边框。</p>

　　<pclass="inset">嵌入边框。</p>

　　<pclass="outset">外凸边框。</p>

　　<pclass="hidden">隐藏边框。</p>

　　</div>

　　</body>

　　效果图：

　　1.jpg

　　上例是同时设置上、下、左、右四面的边框，也可以单独设置一面的边框：border-top-style(上边框)，border-bottom-style(下边框)，border-left-style(左边框)，border-right-style(右边框).

　　2.border-width属性

　　设置边框宽度，为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em(单位为px,pt,cm,em等)，或者使用3个关键字之一，它们分别是thick、medium（默认值）和thin。

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>border-width属性</title>

　　<style>

　　.demo{

　　width:500px;

　　height:500px;

　　margin:50pxauto;

　　}

　　.one{

　　border-style:solid;

　　border-width:5px;

　　}

　　.two{

　　border-style:solid;

　　border-width:medium;

　　}

　　.three{

　　border-style:solid;

　　border-width:1px;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="demo">

　　<pclass="one">一些文本。</p>

　　<pclass="two">一些文本。</p>

　　<pclass="three">一些文本。</p>

　　</div>

　　</body>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55444.shtml