css怎么设置边框样式

这篇文章主要为大家展示了“css怎么设置边框样式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css怎么设置边框样式”这篇文章吧。

我们提供的服务有：网站建设、成都做网站、微信公众号开发、网站优化、网站认证、庆安ssl等。为千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的庆安网站制作公司

一：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>

以上是“css怎么设置边框样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！