就看你们会不会box-shadow

css3晓得不,学H5的怎么能不知道css3里的box-shadow呢?当然属性何其多,就看你6不6。

几年前很火的那个人物悬空的照片还记得不

就是这种,他的原理就是脚旁边弄一滩水渍造成阴影,同理啊比如让图片浮起来有立体效果

box-shadow一步搞定!

好,那就来说说他到底该怎么写

box-shadow 属性向框添加一个或多个阴影

语法:

外阴影:box-shadow: X轴 Y轴 Rpx color;

阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色

内阴影:box-shadow: X轴 Y轴 Rpx color inset;

默认是外阴影 内阴影:inset 可以设置成内部阴影

ps:此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 而不是用来设置文字阴影 如果设置文字阴影请参考知识点:text-shadow(同理)

因为此为新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式、 欧朋浏览器 -o-box-shadow、E>9 -ms-box-shadow。

知道写法以后呢,就是动手实际操作了,光说不练假把式对不对,这里就不多说了,就举一个例子

效果如上,当然数值可随意改变,正负都行,推荐一个在线调试的网站http://www.css88.com/tool/css3Preview/Box-Shadow.html,小伙伴们有兴趣的可以去玩玩

同时也欢迎大家小白,大神,渣渣学霸们加群142991222一起来玩耍

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,355评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,830评论 0 2
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,304评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,680评论 0 7
  • (摘自博客学习笔记,原网址:http://blog.csdn.net/freshlover/article/det...
    空谷悠阅读 1,785评论 0 0