小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • html5弹性布局display:flex;的具体用法

    html5弹性布局display:flex;的具体用法

    首先我们来了解一下flex的定义:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。在我们开发网站的时候,碰见如下图两边对齐的时候回很头疼,不管是用cl……
    321人已经看过了
您的位置:首页 > 前端开发 > Htm l+ Css > Html5 + Css3

box-shadow单边阴影

分类: Html5 + Css3175个赞

box-shadow属性使用方法(1)

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

1.单边阴影效果

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

  1. <html lang="en-US"

  2. <head

  3.   <meta charset="UTF-8"

  4.   <title>box-shadow设置单边阴影效果title

  5.   <style type="text/css"

  6.     .box-shadow {  

  7.       width: 200px;  

  8.       height: 100px;  

  9.       border-radius: 5px;  

  10.       border: 1px solid #ccc;  

  11.       margin: 20px;  

  12.     }  

  13.     .top {  

  14.       box-shadow: 0 -2px 0 red;  

  15.     }  

  16.     .right {  

  17.       box-shadow: 2px 0 0 green;  

  18.     }  

  19.     .bottom {  

  20.       box-shadow: 0 2px 0 blue;  

  21.     }  

  22.     .left {  

  23.       box-shadow: -2px 0 0 orange;  

  24.     }  

  25.   style

  26. head

  27. <body

  28.   <div class="box-shadow top">div

  29.   <div class="box-shadow right">div

  30.   <div class="box-shadow bottom">div

  31.   <div class="box-shadow left">div

  32. body

  33. html

效果如图3-38所示。

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

  1. .top {  

  2.       box-shadow: 0 -2px 5px red;  

  3.     }  

  4.     .right {  

  5.       box-shadow: 2px 0 5px green;  

  6.     }  

  7.     .bottom {  

  8.       box-shadow: 0 2px 5px blue;  

  9.     }  

  10.     .left {  

  11.       box-shadow: -2px 0 5px orange;  

  12.     } 

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

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

  1. .top {  

  2.       box-shadow: 0 -4px 5px -3px red;  

  3.     }  

  4.     .right {  

  5.       box-shadow: 4px 0 5px -3px green;  

  6.     }  

  7.     .bottom {  

  8.       box-shadow: 0 4px 5px -3px blue;  

  9.     }  

  10.     .left {  

  11.       box-shadow: -4px 0 5px -3px orange;  

  12.     } 

上面的代码调整了阴影的位移量,新增了box-shadow的扩展半径,最终效果如图3-40所示。

注意 各浏览器下显示效果略有细节差别。



此文转载自互联网 

小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> box-shadow单边阴影