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属性

第一:box-shadow的语法以及参数: box-shadow 属性可以使用一个或者多个阴影,如果使用多个必须用,隔开。 box-shadow:none |[inset x-offset y-o...

css3盒子阴影box-shadow 设置

定义:box-shadow 属性向框添加一个或多个阴影。 支持:IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法...

HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)

1.box-shadow属性简介: .box { /* .box 默认样式 */ margin: ...

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

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

CSS阴影效果(Box-shadow)用法趣味讲解

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法,然后进一步了解::before...

利用box-shadow制作好看的阴影悬浮特效

很多人都知道有box-shadow,但是自己实际用的时候,会发现自己做的阴影特效都特别的丑,下面我就给大家分享一下各种好看的阴影特效。效果图:代码: 纯CSS3实现的各种阴影效果...

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)

CSS3盒阴影box-shadow

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

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

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...

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

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box-shadow是向盒子添加阴影
举报原因:
原因补充:

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