边框设置

[设为首页] [加入收藏]

提示：站长书库上线了。站长招聘上人才沃

您当前的位置：首页 > 基础教程 > CSS >

下一篇：边框内容设置 上一篇：定义背景

边框设置

一、margin

margin属性用于设置边界边框，默认情况下margin属性没有继承性。

1 margin-top 指定顶部空白 margin-top:30pt;

2 margin-right 指定右端空白 margin-right:2%;

3 margin-bottom 指定底部空白 margin-bottom:auto;

4 margin-left 指定左端空白 margin-left:0;

注：auto-->自动指定

0-->表示没有空白，为默认值

%-->表示相对于父级空白的百分比

示例4.1

本例设置p标签左侧缩进50px

s1.htm

<html> <head> <style type="text/css"> </style> </head> <body> <h2>千山鸟飞绝万径人踪灭</h2> <p>标签p中的元素左侧距离margin-left:50; </p> <p>margin属性具有定位作用</p> <p></p> </body> </html>

示例4.2

本例对p标签的四个边界设置了空白

s2.htm

<html> <head> <style type="text/css"> </style> </head> <body> <p> 千山鸟飞绝万径人踪灭 </p> <p>底部边界由浏览器自动设置margin-bottom:auto;</p> <p><a href="h-3.htm#n1" _fcksavedurl="h-3.htm#n1">返回</a></p> <p> </p> </body> </html>

示例4.3

本例对p标记的顶和左边界进行了设置

s3.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <p> margin-top 指定顶部空白 </p> <p> margin-bottom 指定底部空白 </p> <p> margin用来设置最外层的空白区域 </p> </body> </html>

二、border

border属性用于设置边框样式，颜色，空白缩进等。

1 border-left 设置左边框
2 border-right 设置右边框
3 border-bottom 设置底边框
4 border-top 设置顶边框
5 border-color 设置边框颜色
6 border-style 设置边框风格
（1）none 忽略边框
（2）hidden 隐藏边框
（3）dotted 边框使用点滑线
（4）dashed 边框使用短线
（5）solid 边框使用实线
（6）double 边框使用双实线
（7）groove 边框使用三维凹线
（8）ridge 边框使用三维凸线
（9）inset 边框使用内三维线，结合背景构造凹陷按钮
（10）outset 边框使用外三维线，结合背景构造凸出按钮
（11）inherit 从父级继承
7 border-width 设置边框宽度
（）medium 默认中等宽度
（）thin 比默认略窄
（）thick 比默认略宽
（）inherit 从父级继承

注：只有设置了style属性才可以设置width。

示例4.4

本例对p标记设置了实线边框

s4.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <p>边框使用实线border-style:solid;</p> <p>边框颜色border-color:"red";</p> <p>边框背景background-color:"#d6ffd6"; </p> </body> </html>

示例4.5

本例对p标记的四个边框分别设置

s5.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <p>左边框border-left-style:solid;</p> <p>右边框border-right-style:double;</p> <p>顶边框border-top-style:dotted;</p> <p> 下边框border-bottom-style:dashed;<br> 边框颜色border-color:"red";<br> 背景颜色background-color:"#d6ffd6"; </p> </body> </html>

示例4.6

s6.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <h1>外三维线outset</h1> <h2>内三维线inset</h2> <h3>三维凸线ridge</h3> <p> 三维凹线groove </p> </body> </html>

苏ICP备08101582号