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

[网页设计]CSS知识总结(五)


CSS常用样式

 

3.边框样式

  1)边框线

    border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    常用的边框线:dotted(点状)、dashed(虚线)、solid(实线)、double(双实线)

    border-top-style    设置上边框线

    border-bottom-style  设置下边框线

    border-left-style    设置左边框线

    border-right-style    设置右边框线

    例子:

/* CSS代码 */.style{  width:100px;  height:100px;  border-top-style:dotted;  border-bottom-style:dashed;  border-left-style:solid;  border-right-style:double;}

<!-- HTML代码 --><body>  <div class="style"></div></body>

    效果:

 

 

   2)边框宽度

    border-width : thin | medium | thick | length 

     thin(细边框)、medium(中等边框)、thick(粗边框)、length(数值px)

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

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

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

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

     例子:

/* CSS代码 */.width{  width:100px;  height:100px;  border-style:solid;  border-top-width:thin;  border-bottom-width:medium;  border-left-width:thick;  border-right-width:10px;}

<!-- HTML代码 --><body>  <div class="width"></div></body>

    效果:

 

 

  3)边框颜色

    border-color: color

    color取值:英文单词、十六进制、RGB

    border-top-color    设置上边框颜色

    border-bottom-color  设置下边框颜色

    border-left-color    设置左边框颜色

    border-right-color    设置右边框颜色

    例子:

/* CSS代码 */.color{  width:100px;  height:100px;  border-style:solid;  border-color:5px;  border-top-color:yellow;  border-bottom-color:green;  border-left-color:#f00000;  border-right-color:rgb(0,0,0);}

<!-- HTML代码 --><body>  <div class="color"></div></body>

    效果:

 

 

  4)边框样式缩写

    border : border-width  border-style  border-color

    例子:

div {   width:100px;   height:100px;  border-width:1px;   border-style:solid;   border-color:#FF0000; }

    缩写后:

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

   

  5)圆角效果

    border-radius: length | percentage

   向元素添加圆角表框。有一下几种情况:

   1、所有角都使用半径为10px的圆角

    div{ border-radius:10px;} 

 

   2、四个半径值分别是左上角、右上角、右下角和左下角,顺时针方向

    div{ border-radius: 10px 20px 30px 40px; }

 

    3、设置每个角的水平半径和垂直半径,用斜杠隔开

    div{ border-radius:40px/20px; }

 

    4、圆形

    div{ border-radius:50% }

 

      

  6)边框图片

    border-image

    边框样式使用图像来填充

    设置了border-image后,border-style则不显示

 

  7)盒子阴影

    box-shadow: none | shadow

    box-shadow: 水平偏移量 垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    其中,水平和垂直的偏移量必写,其它各自展示不同的效果。

 

    1、外阴影常规效果:

/* CSS代码 */.outset{  width:100px;  height:100px;  background:#000;  box-shadow:5px 5px #ccc;}

<!-- HTML代码 --><body>  <div class="outset"></div></body>

 

 

    2、外阴影模糊效果:

/* CSS代码 */.outset-blur{  width:100px;  height:100px;  background:#000;  box-shadow:5px 5px 10px #000;}

<!-- HTML代码 --><body>  <div class="outset-blur"></div></body>

 

 

     3、外阴影模糊外延效果:

/* CSS代码 */.outset-extension{  width:100px;  height:100px;  background:#000;  box-shadow:5px 5px 10px 10px #f00;}

<!-- HTML代码 --><body>  <div class="outset-extension"></div></body>

 

 

     4、内阴影常规效果:

/* CSS代码 */.inset{  width:100px;  height:100px;  background:#ccc;  box-shadow:5px 5px #000 inset;}

<!-- HTML代码 --><body>  <div class="inset"></div></body>

 

 

     5、内阴影模糊效果:

/* CSS代码 */.inset-blur{  width:100px;  height:100px;  background:#ccc;  box-shadow:5px 5px 10px #000 inset;}

<!-- HTML代码 --><body>  <div class="inset-blur"></div></body>

 

 

   *在下一篇博文中,会说到关于边框样式和盒子阴影应用到网页中的效果。