css3制作圆角并且投影的图层元素方法

border-radius属性可以制作圆角效果

border-radius属性值包括:ox-shadow: hoff voff bd sd color inset;

box-shadow属性可以制做投影效果

border-radius属性值包括:

  • border-top-left-radius: 定义框的左上角。
  • border-top-right-radius: 定义框的右上角。
  • border-bottom-right-radius: 定义框的右下角。
  • border-bottom-left-radius: 定义框的左下角。

style部分代码:

#left_top{

     width:287px; height:100px; margin-top:10px; margin-left:10px; margin-right:10px;
     border-color:#cccccc; border-style:solid; border-width:1px;
     border-radius:5px;

    box-shadow: 3px 3px 3px lightgray;

}

body部分代码:

        <div id="left_top"> </div>

效果图部分:

 

posted @ 2012-04-01 10:19  菲尼  阅读(382)  评论(2编辑  收藏  举报