CSS教程之：CSS边框

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

通过border属性，我们可以指定一个元素的边框样式。你可以设置border的如下属性： border-color : 指定边框颜色 border-style: 指定边框样式，例如是否为实线，虚线，点线等 border-width: 指定边

通过border属性，我们可以指定一个元素的边框样式。

你可以设置border的如下属性：

border-color : 指定边框颜色
border-style: 指定边框样式，例如是否为实线，虚线，点线等
border-width: 指定边框宽度

下面我们看一下实际的例子。

border-color:属性：
通过border-color属性，我们可以改变一个元素的边框颜色。

使用下面几个属性，我们可以分别设置上，下，左，右四条边的颜色：

border-bottom-color : 改变下边框颜色
border-top-color: 改变上边框颜色
border-left-color: 改变左边框颜色
border-right-color: 改变右边框颜色

例子：

<style type="text/css"> 
p.example1{ 
   border:1px solid; 
   border-bottom-color:#009900; /* Green */ 
   border-top-color:#FF0000;    /* Red */ 
   border-left-color:#330000;   /* Black */ 
   border-right-color:#0000CC;  /* Blue */ 
} 
p.example2{ 
   border:1px solid; 
   border-color:#009900;        /* Green */ 
} 
</style> 
<p class="example1"> 
    This example is showing all borders  
    in different colors. 
</p> 
<p class="example2"> 
    This example is showing all borders  
    in green color only. 
</p>

border-style属性：
bordr-style属性有如下可选值：

none: 无边框
solid: 实线边框
dotted: 点线边框
dashed : 虚线边框
double : 双线边框
groove : 凹陷边框
ridge : 凸起边框
inset : 边框看起来陷入页面
outset : 边框看起来凸出在页面上
hidden : 与none效果相同，为了解决表格中的边框冲突问题

通过如下属性，我们可以分别设置上，下，左，右四条边的样式：

border-bottom-style : 改变下边框样式
border-top-style: 改变上边框样式
border-left-style : 改变左边框样式
border-right-style: 改变右边框样式

例子：

<p style="border-width:4px; border-style:none;"> 
    This is a border with none width. 
</p> 
<p style="border-width:4px; border-style:solid;"> 
    This is a solid border. 
</p> 
<p style="border-width:4px; border-style:dashed;"> 
    This is a dahsed border. 
</p> 
<p style="border-width:4px; border-style:double;"> 
    This is a double border. 
</p> 
<p style="border-width:4px; border-style:groove;"> 
    This is a groove border. 
</p> 
<p style="border-width:4px; border-style:ridge"> 
    This is aridge  border. 
</p> 
<p style="border-width:4px; border-style:inset;"> 
    This is a inset border. 
</p> 
<p style="border-width:4px; border-style:outset;"> 
    This is a outset border. 
</p> 
<p style="border-width:4px; border-style:hidden;"> 
    This is a hidden border. 
</p> 
<p style="border-width:4px;border-top-style:solid;border-bottom-style:dashed;border-left-style:groove;border-right-style:double;"> 
    This is a a border with four different styles. 
</p>

border-width 属性：
通过border-width属性，我们可以设置元素边框宽度。
可选值包括：以px,pt,cm为单位的宽度值，或者: thin, medium, thick

通过如下属性，我们可以分别设置上，下，左，右四条边的宽度：

border-bottom-width : 改变下边框宽度
border-top- width: 改变上边框宽度
border-left- width : 改变左边框宽度
border-right- width: 改变右边框宽度

例子：

<p style="border-width:4px; border-style:solid;"> 
    This is a solid border whose width is 4px. 
</p> 
<p style="border-width:4pt; border-style:solid;"> 
    This is a solid border whose width is 4pt. 
</p> 
<p style="border-width:thin; border-style:solid;"> 
    This is a solid border whose width is thin. 
</p> 
<p style="border-width:medium; border-style:solid;"> 
    This is a solid border whose width is medium; 
</p> 
<p style="border-width:thick; border-style:solid;"> 
    This is a solid border whose width is thick. 
</p> 
<p style="border-bottom-width:4px;border-top-width:10px;border-left-width: 2px;border-right-width:15px;border-style:solid;"> 
    This is a a border with four different width. 
</p>

border属性： 
通过border属性，我们可以一次设置边框的颜色，样式和宽度： 
<p style="border:4px solid red;"> 
    This example is showing shorthand property for border. 
</p>

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

CSS教程之：CSS边框

热门标签

赞助商链接