css3のtext-shadow
text-shadow，让我们大家一起来学习一下吧。
语法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none;
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色，可以是rgba透明色。
说明：
可以设定多组效果，每组参数以逗号分隔。
兼容性：
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Sans-serif;
}
div {
margin-bottom: 10px;
}
/*基本阴影*/
.exg_1 {
font-size:5em;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
color:#FFF;
text-align:center;
background: #0ff;
}
/*深陷凸显*/
.exg_2 {
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
text-align:center;
background: #222;
}
/*硬边的阴影*/
.exg_3 {
font-size: 5em;
color: #fff;
text-shadow:6px 6px 0px rgba(0,0,0,0.2);
text-align: center;
background: #fff3cd; }
/*双层阴影*/
.exg_4 {
font-size: 5em;
color: #000;
text-shadow:4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
text-align: center;
}
/*有一定距离的阴影*/
.exg_5 {
font-size: 5em;
color: #fff;
text-shadow:0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
text-align: center;
background: #fff3cd;
}
/*密切结合并有阴影*/
.exg_6 {
font-size: 5em;
color: #fff;
text-shadow:0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
text-align: center;
background: #6bf9fb;
}
/*立体3D文字*/
.exg_7 {
font-size: 5em;
color: #fff;
text-shadow:0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9;
text-align: center;
background: #3594c0;
}
/*嵌入式文字（仅支持谷歌）*/
.exg_8 {
font-size: 5em;
color: #fff;
background: #dbdbdb;
}
.exg_8 h1 {
background: #666;
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.1) 0px 3px 3px;
text-align: center;
}
/*四周发光的文字*/
.exg_9 {
background: #992d23;
font-size: 5em;
color: #fff;
text-shadow:0px 0px 9px rgba(255,255,255,0.7);
text-align: center;
}
/*层叠文字*/
.exg_10 {
background: #6bf9fb;
font-size: 5em;
color: #fff;
text-shadow: -10px 10px 0px #00e6e6,
-20px 20px 0px #01cccc,
-30px 30px 0px #00bdbd;
text-align: center;
padding-bottom: 0.5em;
}
/*多处光源投射*/
.exg_11 {
font-size: 5em;
color: #fff;
text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
10px 20px 5px rgba(0,0,0,0.05),
-10px 20px 5px rgba(0,0,0,0.05);
text-align: center;
background: #6bf9fb;
padding-bottom: 0.2em;
}
/*浮雕效果*/
.exg_12 {
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow:2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
text-align: center;
background: #609350;
} </style>
</head> <body>
<div class="exg_1">
<h1>marker</h1>
</div>
<div class="exg_2">
<h1>marker</h1>
</div>
<div class="exg_3">
<h1>marker</h1>
</div>
<div class="exg_4">
<h1>marker</h1>
</div>
<div class="exg_5">
<h1>marker</h1>
</div>
<div class="exg_6">
<h1>marker</h1>
</div>
<div class="exg_7">
<h1>marker</h1>
</div>
<div class="exg_8">
<h1>marker</h1>
</div>
<div class="exg_9">
<h1>marker</h1>
</div>
<div class="exg_10">
<h1>marker</h1>
</div>
<div class="exg_11">
<h1>marker</h1>
</div>
<div class="exg_12">
<h1>marker</h1>
</div> </html>
效果图如下：
css3のtext-shadow的更多相关文章
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- [CSS3] Text ellipsis
Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow div{ white-space: now ...
- CSS3 笔记三（Shadow/Text/Web Fonts）
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- 使用CSS3的appearance属性改变元素的外观
昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...
- IE中的CSS3不完全兼容方案
摘要: Internet Explorer,其本身也是足够强大的.IE特有的技术可以很好的实现一些CSS3的效果. 到Internet Explorer 8为止,IE系列是不支持CSS3的.在IE中要 ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- CSS3之阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...
- CSS3：线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
随机推荐
- mongodb存储二进制数据的二种方式——binary bson或gridfs
python 版本为2.7 mongodb版本2.6.5 使用mongodb存储文件,可以使用两种方式,一种是像存储普通数据那样,将文件转化为二进制数据存入mongodb,另一种使用gridfs,咱们 ...
- Sudo环境变量继承
sudo中默认配置会重置环境变量,所以使用sudo的时候需要小心这点.如何让sudo继承我们需要的环境变量?有如下两种方法: #sudo visudo 或者 #vi /etc/sudoers ...
- Matrix Recurrence
给定矩阵$A,B$,且有 $$f(0) = A ,f(i) =B * \prod_{i=w(i)}^{i-1}f(i)$$ 求f(n) 其中,当w(i)单增时,可以做到$O(n*m^3)$,注意要优化 ...
- 13.详解oauth2授权码流程
13.详解oauth2授权码流程 把登陆系统单独独立出来,可以给自己写的微服务用,也可以给第三方的系统调用我们的服务 显式的和隐式的,两种方式,
- Content Security Policy的学习理解
以下内容转载自 http://www.cnblogs.com/alisecurity/p/5924023.html 跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编 ...
- shell脚本函数与数组
前言 之前写过一篇关于shell脚本流程控制总结,这次继续写关于shell脚本的问题.本篇文章主要包含shell脚本中的函数以及数组的用法介绍.同时也涵盖了一些字符串处理以及shell脚本比较使用的小 ...
- vue中循环时动态绑定值
在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...
- 如何成为一个优秀的高级C++程序员
C++这门语言从诞生到今天已经经历了将近 30 个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在 C++ 的使用范围比以前已经少了很多,java.C#.pyt ...
- CodeForces 586D【BFS】
题意: s是这个人开始位置:连续相同大写字母是 Each of the k trains,相应的火车具有相应的字母: '.' 代表空: 有个人在最左列,上面有连续字母代表的火车,火车从左边出去的话,会 ...
- 基于GPU的优化处理
http://www.cnblogs.com/wuhanhoutao/archive/2007/11/10/955293.html 早期的三维场景绘制,显卡只是为屏幕上显示像素提供一个缓存,所有的图形 ...