zoukankan      html  css  js  c++  java
  • 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属性,则可以完成一些网站常用的显示样式

        

  • 相关阅读:
    Noip2012 开车旅行
    「NOI2018」归程
    2019.10.30 队测(晚上)
    洛谷P1138 第k小整数
    洛谷P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold
    Noip-pj2018游记
    洛谷P4994 终于结束的起点
    《退役的你》
    《膜你抄》
    洛谷P5087 数学
  • 原文地址:https://www.cnblogs.com/chrxc/p/5126569.html
Copyright © 2011-2022 走看看