你的位置:首页 > 网页设计

[网页设计]CSS常用样式(二)


一、边框属性

1、border:复合属性。设置对象边框的特性。

  取值:

  border-width: 设置或检索对象边框宽度。

  border-style: 设置或检索对象边框样式。

  border-color: 设置或检索对象边框颜色。

#border4 {   width: 100px;   height: 100px;   border:1px solid #FF0000; }

<div id="border4"></div>

 

 

2、border-width:设置对象的边框宽度。  

  取值:

  meadium:  定义默认厚度的边框

    thin:  定义比默认厚度细的边框。

  thick:  定义比默认厚度粗的边框。

 ★ 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

     如果只提供一个,将用于全部的四边。

     如果提供两个,第一个用于上、下,第二个用于左、右。

     如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

  也可以分别对四边设置边框:

    border-top-width 设置上边框宽度

    border-bottom-width 设置下边框宽度

    border-left-width 设置左边框宽度

    border-right-width 设置右边框宽度

<style>        #border1{  width:200px;  height:100px;  border:solid;  /*border-width: 5px;*/  border-width:2px 3px 4px 5px ;              }</style>

<div id="border1"></div>

 

 

3、border-color:设置或检索对象的边框颜色

  取值:

  (1)英文单词的颜色,如“blue”、“red”

  (2)十六进制值,如“#ffffff”、“#ff0000”

  (3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

<style>        #border2   {     width: 200px;     height: 100px;     border: solid;           border-color: #FF0000;          }</style>

<body>    <div id="border2"></div>    </body>   

 

 

4、border-style:设置对象的边框样式

       取值:

  none:无轮廓。border-color与border-width将被忽略

       hidden:隐藏边框。IE7及以下尚不支持

       dotted:点状轮廓。IE6下显示为dashed效果

       dashed:虚线轮廓。

       solid:  实线轮廓。

       double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

  可以对四边分别设置其边框样式:

#border3 {  width: 200px;  height: 100px;  border: solid;  border-top-style:dotted ;  border-left-style:dashed ;    border-right-style: double;  border-bottom-style: solid;   }

<div id="border3"></div>

 

 

5、border-radius:设置对象使用圆角边框

  • 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
  • 如果只提供一个,将用于全部的于四个角。
  • 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
  • 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。  

   取值

      length:用长度值设置对象的圆角半径长度。不允许负值

   percentage:用百分比设置对象的圆角半径长度。不允许负值 
  
CSS代码#yj{        background-color:indianred ;        width: 100px;        height: 100px;        border-radius: 10px 10px 20px 20px;              }HTML代码:<div id="yj"> </div>