border属性:

1.border-color

2.border-image: none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

      1. none:默认值。无背景图。

      2. <image>:使用绝对或相对 url 地址指定背景图像。

      3. <number>:边框宽度用固定像素值表示。

      4. <percentage>:边框宽度用百分比表示。

      5. [ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。) 


<style>

    div{

       -webkit-border-image: url(images/01.png) 0 12 0 12 stretch stretch;

       -moz-border-image: url(images/01.png) 0 12 0 12 stretch stretch;

         display: block;

         border-width: 0 12px;

       padding: 10px;

         text-align: center;

       font-size: 16px;

           text-decoration: inherit;

         color:white;+color:black;

             /*border-image:url(images/01.png) 0 12 0 12;*/

    }

</style>

<body>

   <div>在safari3+和FF3.5浏览器里能看到边框背景图</div>


</body>


3.border-radius:none|<length>{1,4}[/<length>{1,4}]  ===圆角效果

         

                 参数一:none;(水平半径)

参数二:可省略;

PS:若参数二等于参数一----四分之一圆角。

   任意一个值为0,---矩形

   值不允许为负值

        

          border:1px solid darkblue;

          border-radius: 12px 12px;


        4.box-shadow:<length> <length> <length> <length>||<color>

                         阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正


负值);阴影模糊值;阴影颜色

          box-shadow: 3px 2px 8px #000;