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

        

  • 相关阅读:
    05-3. 六度空间 (PAT)
    05-2. Saving James Bond
    05-1. List Components (PAT)
    04-3. Huffman Codes (PAT)
    04-2. File Transfer (PAT)
    04-1. Root of AVL Tree (PAT)
    03-3. Tree Traversals Again (PAT)
    03-2. List Leaves (PAT)
    03-1. 二分法求多项式单根(PAT)
    CDH Namenode自动切换(active-standby)
  • 原文地址:https://www.cnblogs.com/chrxc/p/5126569.html
Copyright © 2011-2022 走看看