首页  >  六六互联  >  边框基本属性及类型

边框基本属性及类型

作者:zhushican  丨  时间:2022年08月11日  丨  分类:六六互联

边框基本属性及类型

边框基本属性及类型,主要包括如表3-13所示几种情况

                  表3-13 边框基本属性                                             

 

属性

 
 

   

 
 

border-color

 
 

设置四条边框的颜色。

 
 

border-image

 
 

设置或检索对象的边框使用图像来填充

 
 

border-image-source

 
 

设置或检索对象的边框是否用图像定义样式或图像来源路径

 
 

border-image-slice

 
 

设置或检索对象的边框背景图的分割方式

 
 

border-image-width

 
 

设置或检索对象的边框厚度

 
 

border-image-outset

 
 

设置或检索对象的边框背景图的扩展

 
 

border-image-repeat

 
 

设置或检索对象的边框图像的平铺方式

 
 

border-radius

 
 

设置或检索对象使用圆角边框

 
 

border-top-left-radius

 
 

设置或检索对象左上角圆角边框

 
 

border-top-right-radius

 
 

设置或检索对象右上角圆角边框

 
 

border-bottom-right-radius

 
 

设置或检索对象右下角圆角边框

 
 

border-bottom-left-radius

 
 

设置或检索对象左下角圆角边框

 
 

box-shadow

 
 

设置和检索对象阴影

 

1.边框颜色

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。border-color属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。

下列案例3-10所示,通过border-color设置边框颜色。

例3-10 example10.html

 

<!DOCTYPE  html> 

<html>

<head>

<meta  charset="UTF-8">

<style  type="text/css">

p.one

{ border-style: solid;border-color:  #0000f }

p.two{border-style:  solid;border-color: #ff0000 #0000ff}

p.three{border-style:  solid;border-color: #ff0000 #00ff00 #0000ff }

p.four{border-style:  solid;

border-color: #ff0000  #00ff00 #0000ff rgb(250,0,255)  }

</style>

</head>

<body>

<p>One-colored border!</p>

<p>Two-colored border!</p>

<p>Three-colored border!</p>

<p>Four-colored border!</p>

<p><b>注释:</b>"border-width"  属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>

</body>

</html>

运行3-10,效果如图3-12所示。                      

边框基本属性及类型

图3-12 border-color设置边框的颜色


  评论