box-shadow是向盒子添加阴影
来源:互联网 发布:淘宝运营和美工的区别 编辑:程序博客网 时间:2024/06/09 11: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>
0 0
- box-shadow是向盒子添加阴影
- 盒子阴影-box-shadow
- 盒子阴影box-shadow和文本阴影text-shadow
- CSS3盒子阴影 box-shadow属性
- css3盒子阴影box-shadow 设置
- 盒子模型——盒子阴影box-shadow
- box-shadow 添加阴影效果Css3
- box-shadow 为元素添加阴影
- CSS3属性 box-shadow 向框添加一个或多个阴影
- CSS中怎样制作盒子阴影 box-shadow
- css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)
- 【CSS3】---阴影 box-shadow
- 阴影box-shadow
- css3阴影box-shadow
- 边框阴影box-shadow
- box-shadow阴影效果
- box-shadow阴影
- 阴影box-shadow
- Class定义和用法
- 源代码管理工具SVN和Git小结
- leetcode:Trie:Word Search II(212)
- Verilog testbench的写法之输入输出文件
- 异步刷新UI
- box-shadow是向盒子添加阴影
- 就是为了上传图片
- 51nod - 1661 黑板上的游戏 - 博弈论
- Http 四种请求访问代码 HttpGet HttpPost HttpPut HttpDelete
- Maven - 构建 & 测试工程
- 个人学习路线计划
- 设置VirtualBox虚拟机里的系统与host主机共享文件夹
- Swift 元组
- 从远程库克隆