CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）
2016年2月26日个人博客文章--迁移到segmentfault
（1）text-shadow(文本阴影)
在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果：
没错文本的阴影的效果很强大，接下来我们就一起开始学习吧.
语法：text-shadow：none | length{2,3} color
默认值：none
取值：
none:无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值
第3个长度值：可选，阴影模糊值。不允许负值
color： 设置阴影的颜色
说明:可以设定多组效果，每组参数值以逗号分隔
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）
注意：(1)使用空格分开不同属性值 (2)使用逗号分开不同阴影属性
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
</body>
</html>在浏览器上展示效果如图所示：
（2）box-shadow（盒阴影）
因为box-shadow与text-shadow用法几乎相同只是box-shadow与文本阴影相比，盒阴影多了一个属性值——阴影外延值（第四个值）
语法：box-shadow：none | length{2,4} color默认值：none
取值：
none： 无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值
第3个长度值：可选，阴影模糊值。不允许负值
第4个长度值：可选，阴影外延值。不允许负值
color： 设置阴影的颜色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
div{ float:left; margin:100px; width:400px; height:300px; font-size: 20px; line-height: 300px; text-align: center; }
.d1{box-shadow:0px 0px 50px 50px rgba(153,153,238,1);}
.d2{box-shadow:50px 0px 50px 50px rgba(153,153,238,1);}
.d3{box-shadow:-50px 0px 50px 0px rgba(153,153,238,1);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</body>
</html>
CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）的更多相关文章
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- CSS3 笔记三（Shadow/Text/Web Fonts）
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
- 炫彩流光按钮 CSS + HTML
炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值.--歌德 效果图 三个绝美的样例 HTML代码 <div class="box"> <but ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- 优秀教程：使用 CSS3 动画实现的超炫的过渡特效
Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...
- [Micropython]发光二极管制作炫彩跑马灯
先甩锅 做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光二极管白天不是很明显 晚上炫彩效果就能出来了.本次实验用的是8个灯珠 ...
随机推荐
- CNN Mini-Fashion数据集以及Pytorch初体验
下载Fasion-MNIST数据集 Fashion-MNIST是一个替代原始的MNIST手写数字数据集的另一个图像数据集. 它是由Zalando(一家德国的时尚科技公司)旗下的研究部门提供.其涵盖了来 ...
- node安装依赖
node 版本:v6.11.2 npm 版本:3.10.10 开发(在UI目录下) # 安装依赖 npm install ## 若上述不行则采取下面命令 npm install --regist ...
- linear correlation coefficient|Correlation and Causation|lurking variables
4.4 Linear Correlation 若由SxxSyySxy定义则为: 所以为了计算方便: 所以,可以明白的是,Sxx和Sx是不一样的! 所以,t r is independent of th ...
- dedecms_5.7 download.php SQL注入
最近在看Web渗透与漏洞挖掘,这本书的编写目的感觉非常的不错,把渗透和代码审计结合在一起,但是代码审计部分感觉思路个人认为并不是很清晰,在学习dedecms v5.7 SQL注入的时候就只看懂了漏洞, ...
- conditon 实现等待/通知
synchronized 与wait() 和notify() notifyAll() 方法相结合可以实现等待 通知 ReetrantLock也可以实现同样的功能 需要借助condition对象,一个l ...
- 用Excel做数据分析常用函数（数据清理、关联匹配……）
本文总结在使用Excel进行数据分析时,最常用的功能和函数. Excel的功能和函数非常多,用进废退,除了学习基本的函数和功能,最重要的是遇到问题可以快速的搜索并解决. 首先Excel可以处理的数据量 ...
- Linux_实验1 Red Hat的使用
目录 使用rjxy用户登录图形界面 由当前控制台切换到tty4虚拟控制台: 由当前用户切换到root用户: 用root用户查看当前运行级别,并把当前运行级别切换到3级,再切换到5级运行级别: 用“ge ...
- Weave实现跨主机容器互联
安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...
- MS15-020 文件共享漏洞利用
Metasploit MS15-020漏洞利用 环境: 共享机/受害者:windows xp IP:192.168.222.1 攻击机:kali linux IP:192.168.10.1 msfco ...
- Java反射的应用 --- 内省
一.基础概念 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法.Java JDK中提供了一套 API 用来访问某个属性的 getter/sette ...