CSS3之阴影
CSS3中新增属性-阴影，可以做出很多漂亮的效果。
文字阴影text-shadow
text-shadow属性值的顺序：
text-shadow: h-shadow v-shadow blur color;
参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。
一个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
p{
margin: 0;
font-family: helvetica,arial,sans-serif;
color: #999;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head> <body>
<p>Text Shadow</p>
</body>
</html>
图图：
通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
p{
margin: 0;
font-family: helvetica,arial,sans-serif;
color: #999;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:-10px -10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
图图：
可以修改模糊半径来控制阴影的模糊程度：
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
p{
margin: 0;
font-family: helvetica,arial,sans-serif;
color: #999;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px 30px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
图图：
也可以定义多个阴影用逗号隔开：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
p{
margin: 0;
font-family: helvetica,arial,sans-serif;
color: #fff;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:20px 50px 10px #600,
30px -10px 10px #060,
-40px 20px 10px #006;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
图图
还可以来点特效，比如燃烧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
body
{
background:#000;
}
p{
margin: 0;
padding:24px;
font-family: helvetica,arial,sans-serif;
color: #000;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:0 0 4px #fff,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
图图：
浮雕效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
body
{
background:#ccc;
}
p{
margin: 0;
padding:24px;
font-family: helvetica,arial,sans-serif;
color: #d1d1d1;
background:#ccc;
text-align: center;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>
图图：
盒子阴影box-shadow
box-shadow的属性值的顺序：
box-shadow: hoff voff bd sd color inset;
这里，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影的颜色，inset 是一个关键字，在使用时指示阴影是内部阴影，而不是外部阴影。前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。
上一些栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style type="text/css">
#sbox{
width: 200px;
padding: 32px;
background: #3385ff;
text-align: center;
-webkit-box-shadow:5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
box-shadow: 5px 5px 10px black;
}
</style>
</head> <body>
<div id="sbox">Box Shadow</div>
</body>
</html>
图图：
CSS3之阴影的更多相关文章
- 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- CSS3文本阴影、边框阴影
CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow 使用text-shadow,可以 ...
- css3字阴影text-shadow
看到text-shadow这句代码,眼尖的同学是不是觉得很熟悉?没错,前面我们已经学习过<css3基础教程五边框box-shadow>,而且这两者非常相近,只要以前的课程学好了,text- ...
- CSS3 box-shadow(阴影使用)
from: http://jingyan.baidu.com/article/03b2f78c4d9fae5ea237aea6.html css3 box-shadow 内阴影与外阴影 1- box- ...
- css3 box-shadow 阴影的用法
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- css3 box-shadow阴影(外阴影与外发光)
基础说明: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影 ...
- css3 box-shadow阴影(外阴影与外发光)讲解
基础说明: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影 ...
- CSS-3 文字阴影—text-shadow 的使用
text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...
随机推荐
- 黄聪：wordpress/wp-includes目录文件
wp-includes/cache.php wp-includes/capabilities.php wp-includes/class-IXR.php:Incutio XML-RPC库.包括了 XM ...
- EntityFramework ,ef 介绍
EntityFramework之领域驱动设计实践 分层架构 在引入实例以前,我们有必要回顾,并进一步了解分层架构.“层”是一种体系结构模式[POSA1],也是被广大软件从业人员用得最为广泛而且最为灵活 ...
- PL/SQL中批量执行SQL脚本(不可把所有的语句都复制到New SQL Windows)
PL/SQL中批量执行SQL脚本,不可把所有的语句都复制到New SQL Window,因为这样会导致缓冲区过大而进程卡死! 最好的办法是将要执行的SQL脚本存放到指定文件中,如C:\insert.s ...
- GC学习笔记
GC学习笔记 这是我公司同事的GC学习笔记,写得蛮详细的,由浅入深,循序渐进,让人一看就懂,特转到这里. 一.GC特性以及各种GC的选择 1.垃圾回收器的特性 2.对垃圾回收器的选择 2.1 连续 V ...
- 基于jquery的表单校验插件 - formvalidator使用体验
下载地址:http://www.formvalidator.net/ 基本样例 <form action="/registration" method="POST& ...
- volatile适用场景
1.volatile最适用一个线程写,多个线程读的场合. 如果有多个线程并发写操作,仍然需要使用锁或者线程安全的容器或者原子变量来代替.(摘自Netty权威指南) 疑问:如果只是赋值的原子操作,是否可 ...
- Jmeter+Jenkins集成html报告显示问题
在J meter+Jenkins集成生成的html报告时,出现如下问题:无法正常显示表格,detail内容无法折叠和展开操作. 解决方法:执行下列脚本行 在Jenkins :系统管理--脚本命令行 S ...
- android 插件化 模块化开发
http://blog.csdn.net/o1587790525/article/details/11891997 Android 插件化架构设计 http://www.iqiyi.com/w_19 ...
- java获取对应字节数的内容
每个英文字符占一字节 每个汉字当编码不同时字节数不同,utf-8中一个汉语字符占位3字节 示例: 获取任意一个字符串的前四个字节. Scanner sc = new Scanner(System.in ...
- Javascript 原型编程初探
创建两个对象独立运行 var PlayTrace = function (interVal,name) { this.interVal = interVal; this.playName = name ...