box-shadow是向盒子添加阴影

转载 2016年08月31日 15:05:37

box-shadow是向盒子添加阴影。支持添加一个或者多个。

很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数介绍:

注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadowwww.dztcsd.com</title>
<style>
.boxshadow-outset{
    width:100px;
height:100px;
    box-shadow:4px 4px 6px #666; 
}
.boxshadow-inset{
    width:100px;
    height:100px;
    box-shadow:4px 4px 6px #666 inset; 
}
.boxshadow-multi{
    width:100px;
    height:100px;
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}


</style>
</head>


<body>
<h2>外阴影</h2>
<div class="boxshadow-outset">
</div>
<br />
<h2>内阴影</h2>
<div class="boxshadow-inset">
</div>
<br />
<h2>多阴影</h2>
<div class="boxshadow-multi">
</div>
</body>
</html>

CSS3 盒阴影(box-shadow)详解

CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果。本文我们搁下I...
  • wuxiaopeng_1986
  • wuxiaopeng_1986
  • 2016年09月22日 12:39
  • 796

css3盒子阴影box-shadow 设置

定义:box-shadow 属性向框添加一个或多个阴影。 支持:IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法...
  • I_am_listen
  • I_am_listen
  • 2017年05月16日 10:59
  • 485

CSS3盒子阴影 box-shadow属性

第一:box-shadow的语法以及参数: box-shadow 属性可以使用一个或者多个阴影,如果使用多个必须用,隔开。 box-shadow:none |[inset x-offset y-o...
  • sinat_16073327
  • sinat_16073327
  • 2015年05月04日 21:08
  • 1410

如何给边框添加阴影效果:box-shadow

css的box-shadow是用来添加边框阴影效果的。 属性值详解: 1、inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴...
  • zzqwxx
  • zzqwxx
  • 2016年07月13日 10:54
  • 7167

90行javascript代码写出盒阴影动画

这个盒阴影动画是没用使用布局的,稍后大家在源码上可以看到,css代码都只有几行,绝大部分代码都是javascript代码,而且是原生javascript书写的,下面我们来看一下效果源码。...
  • qq_39345165
  • qq_39345165
  • 2018年01月31日 22:15
  • 21

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

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

CSS3盒阴影box-shadow

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

IE6、IE7、IE8实现盒子阴影shadow

通常,我们实现盒阴影都是通过这段代码来实现的 -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3p...
  • Daisukes
  • Daisukes
  • 2016年11月14日 10:52
  • 1126

利用伪元素制作盒子阴影

本文参考https://paulund.co.uk/learn-css-box-shadow 因为box-shadow和:before以及:after没有什么值得深度剖析的方式,在去解释也不会让自己...
  • Efficiency9
  • Efficiency9
  • 2017年07月14日 21:04
  • 209

css3 box-shadow 内阴影与外阴影

css3 box-shadow 内阴影与外阴影   1- box-shadow具体使用方法,语法:   E {box-shadow:inset x-offset y-offset blur-...
  • u013149477
  • u013149477
  • 2014年08月29日 11:26
  • 640
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box-shadow是向盒子添加阴影
举报原因:
原因补充:

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