css边框之border属性的用法笔记

原创 PHP笔记  2017-03-24 17:43  阅读 1,665 views 次

html中,元素都可以设置边框(border),我们一般使用css边框属性来控制边框的显示效果(宽度、样式、颜色)。

css边框与背景

CSS2.1后,元素的背景包含了边框区域的背景,而边框是在元素的背景之上,如果边框是间断的,那么元素的背景应当出现在边框的间断区间。

实例:

......
<body>
<style type="text/css">
div {
width: 300px;
height:200px;
border: 10px dotted red;
background:#9AFF9A;
}
</style>
<div>边框与背景示例</div>
</body>
......

运行结果:

 

css边框样式

border-style属性设置了边框的样式。

实例:

......
<body>
<style type="text/css">
#a {border-style:none;}
#b {border-style:dotted;}
#c {border-style:inset;}
#d {border-style:outset;}
#e {border-style:solid;}
</style>
<p id="a">无边框。</p>
<p id="b">虚线边框。</p>
<p id="c">嵌入边框</p>
<p id="d">外凸边框</p>
<p id="e">实线边框</p>
</body>
......

运行结果:

 

css边框宽度

border-width属性设置了边框的宽度。border-width属性属性值有两种格式,一种是以px,、pt,、cm、em等为单位(如:2px;);另一种是使用thick 、medium(默认值)、thin 3个关键字(3个关键字没有具体宽度,因此有可能不同的用户会看到不同的宽度)。

实例:

......
<body>
<style type="text/css">
#a {border-style:solid;border-width:thick;}
#b {border-style:solid;border-width:medium;}
#c {border-style:solid;border-width:thin;}
#e {border-style:solid;border-width:7px;}
</style>
<p id="a">border-width:thick;</p>
<p id="b">border-width:medium;</p>
<p id="c">border-width:thin;</p>
<p id="e">border-width:7px;</p>
</body>
......

运行结果:

 

css边框颜色

border-color属性设置了边框的颜色。设置边框颜色必须先设置边框样式,不然是没有效果的。

实例:

......
<body>
<style type="text/css">
#a {border-style:solid;border-color:red;}
#b {border-style:solid;border-color:#9932CC;}
</style>
<p id="a">边框颜色示例1</p>
<p id="b">边框颜色示例2</p>
</body>
......

运行结果:

 

css边框单边设置

格式:

选择器{
border-top-style:样式;/*上边框*/
border-right-style:样式;/*右边框*/
border-bottom-style:样式;/*下边框*/
border-left-style:样式;/*左边框*/
}

简写格式:

选择器{
border-style:1 2 3 4;/*1:上边框样式;2:右边框;3:下边框样式;4:左边框样式*/
border-style:1 24 3;/*24:左右边框样式;*/
border-style:13 24;/*13:上下边框样式;*/
border-style:1234;/*13:上下左右边框样式;*/
}

边框的宽度和颜色也可以单边设置,用border-width和border-color属性,格式和border-style格式一样。

实例:

......
<body>
<style type="text/css">
#a {border-style:solid ;border-width:1px 3px 7px 9px;}
#b {border-style:solid;border-color:#9932CC #8B636C #8470FF #CD0000;}
#c {border-style:solid dotted double dashed;}
</style>
<p id="a">边框的宽度不同示例</p>
<p id="b">边框的颜色不同示例</p>
<p id="c">边框的样式不同示例</p>
</body>
......

运行结果:

 

css简写属性(border)

border可以同时设置边框的宽度、样式和颜色。

格式:

border:宽度 样式 颜色;

实例:

......
<body>
<style type="text/css">
#a {border:2px solid red;}
</style>
<p id="a">border边框示例</p>
</body>
......

 

运行结果:

 

非常相关
本文地址:https://www.ggbiji.com/css-border.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情