关闭

css3之box-shadow属性

111人阅读 评论(0) 收藏 举报

容器阴影   box-shadow

例:box-shadow:1px 2px 30px 40px rgba(255,255,255,0.8) inset;

说明:

h-shadow  1px   必须  水平阴影的位置,默认值为0,正值在容器的右边,负值在左边;
v-shadow  2px   必须  垂直阴影的位置,默认值为0,正值在容器的下边,负值在上边;
blur           30px  可选  模糊距离,默认值为0,只能是正值;
spread      40px  可选  阴影的尺寸,默认值为0,正值变大,负值变小;
color         rgba(255,255,255,0.8) 可选  阴影颜色  默认为黑色;

inset         可选  将外部阴影(outset) 改为内部阴影  默认是outset;

//<img/>的inset无效,outset有效//


一个容器可设置多个阴影,它们之间用逗号隔开;先写的在最上层

例:box-shadow:0px 0px 0px 40px rgba(255,255,255,0.8) ,10px 10px 0px 10px green;

  后写的绿色的阴影将被白色的挡住;

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

探索 CSS3 中的 box-shadow 属性

原文链接:http://web.jobbole.com/87938/ 挖掘你之前未曾见过的一些应用。 PS:文章末尾的 codepen 有8个不错的案例。 “box-shadow...
  • u013063153
  • u013063153
  • 2016-09-27 10:11
  • 616

探索 CSS3 中的 box-shadow 属性

挖掘你之前未曾见过的一些应用。 “box-shadow”属性 box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”...
  • yeana1
  • yeana1
  • 2016-09-28 15:57
  • 666

IE下兼容CSS3属性(或IE兼容box-shadow)方法

本文主要讲述IE下兼容CSS3属性的方法,问题来源于我想要在IE下用box-shadow这个属性做阴影,所以会主要围绕box-shadow来讲。 第一种:如果我们想要在IE下兼容CSS3的属性可以使...
  • liona_koukou
  • liona_koukou
  • 2016-09-07 11:44
  • 4346

CSS3属性之二:box-shadow

语法: box-shadow: || 取值: ? ? || : 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色  说明: 设...
  • xuewufeifang
  • xuewufeifang
  • 2013-03-07 14:52
  • 447

CSS3属性之二:box-shadow

语法: box-shadow: || 取值: ? ? || : 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色  说明: 设...
  • ranmudaofa
  • ranmudaofa
  • 2013-02-01 12:24
  • 346

CSS3属性之二:box-shadow

语法:box-shadow:    || 取值:  ? ? || :阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色 说明:设置块阴影box-shadow这个属性应用的...
  • djf3848
  • djf3848
  • 2013-08-05 20:11
  • 381

css3中的box-shadow(阴影)使用说明和兼容性问题

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...
  • u012250252
  • u012250252
  • 2017-02-18 21:07
  • 2982

【CSS3】关于box-shadow的扩展半径

这个参数很少用到,大部分情况下都省略了,但如果不理解,心里不舒服,所以还是说一下吧。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];...
  • happyhaojie
  • happyhaojie
  • 2016-02-26 15:44
  • 943

css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)

做完后效果如下: 上面是曲边阴影,下边是翘边阴影。曲边阴影下部是类似弧线,翘边效果四角旁边翘起阴影。 *{ margin:0; padding: 0; } ul{ list-sty...
  • Christine95
  • Christine95
  • 2015-07-14 16:28
  • 1952

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016-06-09 00:07
  • 3700
    个人资料
    • 访问:12058次
    • 积分:380
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:12篇
    • 译文:0篇
    • 评论:0条
    文章存档