欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3之box-shadow属性使用以及单边阴影效果设置

程序员文章站 2022-04-22 08:26:35
...
3.5.2 box-shadow属性使用方法(1)

和PSD软件制作图片相比,box-shadow修改元素的阴影效果要方便得多,因为box-shadow可以修改六个参数,得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1.单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的,例如:

  1. > 
    <html lang="en-US"> 
    <head> 
      <meta charset="UTF-8"> 
      <title>box-shadow设置单边阴影效果title> 
      <style type="text/css"> 
        .box-shadow {  
          width: 200px;  
          height: 100px;  
          border-radius: 5px;  
          border: 1px solid #ccc;  
          margin: 20px;  
        }  
        .top {  
          box-shadow: 0 -2px 0 red;  
        }  
        .right {  
          box-shadow: 2px 0 0 green;  
        }  
        .bottom {  
          box-shadow: 0 2px 0 blue;  
        }  
        .left {  
          box-shadow: -2px 0 0 orange;  
        }  
      style> 
    head> 
    <body> 
      <p class="box-shadow top">p> 
      <p class="box-shadow right">p> 
      <p class="box-shadow bottom">p> 
      <p class="box-shadow left">p> 
    body> 
    html>

效果如图3-38所示。

CSS3之box-shadow属性使用以及单边阴影效果设置

这个案例中,使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量 来实现,其中x-offset为正值时,生成右边阴影,反之为负值时,生成左边阴影;y-offset为正值时,生成底部阴影,反之为负值时生成顶部阴 影。此例中是一个单边实影投影效果(阴影模糊半径为0),但是如果阴影的模糊半径不是0,上面的方法还能不能实现单边阴影效果呢?不急着来回答,在上面的 实例中添加一个模糊半径,例如:

  1. .top {  
          box-shadow: 0 -2px 5px red;  
        }  
        .right {  
          box-shadow: 2px 0 5px green;  
        }  
        .bottom {  
          box-shadow: 0 2px 5px blue;  
        }  
        .left {  
          box-shadow: -2px 0 5px orange;  
        }

图3-39说明,这个效果并不是理想的单边阴影效果,当box-shadow添加了5px阴影模糊半径后,阴影不再是实影投影,阴影清晰度向外扩散,更具阴影的效果。但造成了另一个问题,给元素其他三个边加上淡淡的阴影效果,可这并不是设计需要的效果。

那究竟要怎么做呢?此时,box-shadow属性中的阴影扩展半径(spread-radius)会是一个很关键的属性,要实现单边阴影效果,必须配上这个属性(除单边实影之外)。

CSS3之box-shadow属性使用以及单边阴影效果设置

  1. .top {  
          box-shadow: 0 -4px 5px -3px red;  
        }  
        .right {  
          box-shadow: 4px 0 5px -3px green;  
        }  
        .bottom {  
          box-shadow: 0 4px 5px -3px blue;  
        }  
        .left {  
          box-shadow: -4px 0 5px -3px orange;  
        }

上面的代码调整了阴影的位移量,新增了box-shadow的扩展半径,

以上就是CSS3之box-shadow属性使用以及单边阴影效果设置的详细内容,更多请关注其它相关文章!