• 边框
    • border-radius （圆角边框）
    • box-shadow （边框阴影）
    • border-image （边框图片）
    • 源码

    边框

    CSS3 Border（边框）主要有以下属性：

    • border-radius
    • box-shadow
    • border-image

    注意：Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。
    对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。
    Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

    border-radius （圆角边框）

    在 CSS3 中，border-radius 属性用于创建圆角

    1. .border_radius {
    2.     border: 2px solid;
    3.     font-size: 14px;
    4.     color: #ffffff;
    5.     font-weight: bold;
    6.     padding: 10px;
    7.     background: #6AAFCF;
    8.     border-radius: 25px;
    9.     -moz-border-radius: 25px; /* For Firefox Browser */
    10.     -webkit-border-radius: 25px; /* For Safari and Google Chrome Browser */
    11.     -o-border-radius: 25px /* For Opera Browser */
    12. }

    box-shadow （边框阴影）

    在 CSS3 中，box-shadow 用于向方框添加阴影：

    1. .box_shadow {
    2.     font-size: 14px;
    3.     color: #ffffff;
    4.     font-weight: bold;
    5.     padding: 10px;
    6.     background: #6AAFCF;
    7.     -moz-box-shadow: 15px 15px 5px #888245; /* For Firefox/Mozilla */
    8.     -webkit-box-shadow: 15px 15px 5px #888245; /* For Google Chrome and Safari */
    9.     -o-box-shadow: 15px 15px 5px #888245; /* For Opera */
    10.     box-shadow: 15px 15px 5px #888245;
    11. }

    border-image （边框图片）

    通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

    1. .border_image {
    2.     border-width: 15px;
    3.     -moz-border-image: url(/images/border.png) 30 30 round; /* Firefox */
    4.     -webkit-border-image: url(/images/border.png) 30 30 round; /* Safari and Chrome */
    5.     -o-border-image: url(/images/border.png) 30 30 round; /* Opera */
    6.     border-image: url(/images/border.png) 30 30 round;
    7. }

    源码

    本文中所用例子源码参见
    https://github.com/waylau/css3-tutorial 中 samples 目录下的 border.html