CSS3 box-shadow

原创 2015年11月18日 18:41:37

工作需要需要一个box-shadow效果,需要内阴影,且div的四周都要有阴影,对于CSS的box-shadow效果,有人说外阴影可以理解为从盒子的上方照下去投出的阴影,而内阴影则是从侧面照过去投出的阴影,这样想的话,就不难理解为什么设置内阴影的时候出现的效果一般都是left和bottom,或者top和right,在网上找的效果无外是这几种:
这里写图片描述

这里写图片描述

如何做一个四周都有内阴影的效果呢?

可以借鉴这种做法:

.box_container{
    box-shadow: 2px -2px  3px 3px black inset;
    -webkit-box-shadow: 2px -2px 3px 3px black inset;
    -moz-box-shadow: 2px  -2px 3px 3px black inset;
}

box-shadow具体使用方法,语法:

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说:对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

探索 CSS3 中的 box-shadow 属性

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

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

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016年06月09日 00:07
  • 3871

CSS3盒阴影box-shadow

本文介绍了CSS3中的盒子阴影box-shadow,包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等!以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果!...
  • macanfa
  • macanfa
  • 2016年06月12日 15:47
  • 1088

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

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

css3阴影box-shadow使用个人笔记

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...
  • liuxia666
  • liuxia666
  • 2017年08月02日 10:49
  • 226

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

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

ios8.3 iphone6-plus box-shadow 不兼容

ios8.3 iphone6-plus   box-shadow 不兼容,要加一个border-radius
  • kongjiea
  • kongjiea
  • 2015年09月08日 17:22
  • 2127

高性能动画“box-shadow”属性

本文从《[How to animate "box-shadow" with silky smooth performance](http://tobiasahlin.com/blog/how-to-a...
  • whqet
  • whqet
  • 2015年12月13日 10:52
  • 3731

css3阴影box-shadow

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...
  • xufeiayang
  • xufeiayang
  • 2016年11月23日 12:13
  • 176

css中box-shadow属性与text-shadow属性

box-shadow就是在原来的块下复制了一份相同大小的块,放在原来的块下面,然后相对于左上角移动,做出类似阴影的效果,然后添加阴影的宽度以及阴影扩散的半径,最后就是颜色,另外一个inset属性放在最...
  • evilemon
  • evilemon
  • 2015年07月11日 20:39
  • 806
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 box-shadow
举报原因:
原因补充:

(最多只允许输入30个字)