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属性,则可以完成一些网站常用的显示样式

    

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