HTML5、CSS3实现，圆角、阴影、边界图片

• 边框
• 圆角
• 背景

重点

• 圆角

1. 边框

        用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

1.1 圆角

        通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

CSS border-radius 属性

CSS border-radius 属性定义元素角的半径。

代码如下：

 div {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 25px;
 }

border-radius 属性实际上是以下属性的简写属性：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

---

CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

        四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

.div4 {
            width: 350px;
            height: 200px;
            background-color: #73AD21;
            border-radius: 20px 50px 30px 5px;
        }

        三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

.div3 {
            width: 350px;
            height: 200px;
            background-color: #73AD21