css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

标签：

　　　　首先我要介绍的是border-radius属性，它的作用是实现圆角边框，其中border-radius：20px;表示，一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高，如果是正方体则会是一个球，依靠这个属性我们可以不用ps6的情况下，做成一个较为美观的按钮或者控件，它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius，这对我们控制图型有了更准确的把握。

　　　　然后要详细介绍的是box-shadow属性，向边框添加阴影，其中它有六个重要的参数。

　　　　1.阴影类型：此参数可选，如果不设值，默认的阴影类型是外部阴影，如果取其唯一值“inset”则是内阴影。

　　　　2.h-shadow:必有，阴影的水平偏移位置，其值可以是正负值，为正值，其阴影在对象右边，为负值，其阴影在对象左边。

　　　　3.v-shadow:必有，阴影的垂直偏移位置，其值也可为正负值，为正值，其阴影在对象的底边，为负值，其阴影在对象的上边。

　　　　4.阴影模糊：此参数可选，其值只能为正值，值为0时，表示阴影不具备模糊效果，其值越大则阴影边缘就越模糊。

　　　　5.阴影扩展半径：次参数可选，其值可以是正负值，如果为正，整个阴影都延展扩大，如果为负值，则阴影缩小。

　　　　6.阴影颜色：此参数可选（这个属性我就不加以解释了，就是我们常用的颜色属性）

　　　　这两个属性配合前面学过的transition属性和transform属性，则可以完成一些网站常用的显示样式

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

标签：

原文地址：http://www.cnblogs.com/chrxc/p/5126569.html