CSS3 Shadows浏览器支持情况
text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处:
box-shadow语法:
CSS Code复制内容到剪贴板- box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
text-shadow语法:
CSS Code复制内容到剪贴板- text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
这里只有几个不同点:
不能为文本创建一个内阴影
有文字阴影没有扩散距离
但是可以创建多个阴影(显示在彼此的顶部)。
text-shadow学习
color 和 offsets
- text-shadow:10px 10px;
- text-shadow:-5px -5px; color:blue;
- text-shadow:-1px -1px white; color:blue; background:#888;
- text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;
注意,正值使阴影往右/下移动,负值往左/上移动
阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能会有所不同,所以我建议定义颜色项(RGB或RGBA和HSLA等)。
blur
模糊是可选的参数,它定义了距离模糊。它应该是一个正数(因为0意味着没有模糊)。下面的图片,说明它是如何工作的:
- element {
- text-shadow:5px 5px 3px darkred; color:red;
- }
- element {
- text-shadow:4px -4px 10px red;
- color:azure;
- background:#333;
- }
- element {
- text-shadow:0px 0px 4px ;
- }
- parent {
- color:red;
- }
- element {
- text-shadow:0px 0px 4px ;
- }
- parent {
- color:lightgray;
- background:#333;
- }
第一个例子使用不同的模糊距离,最后两个例子我们不设置颜色,但采用不同的颜色和背景色的父级。
Expansion 和 contraction
与box-shadow类似,spread 属性将要在css4中要添加。目前,它得到了ie10(可能是更现代的浏览器)的支持。这是text-shadow的第四个参数。你可以使用这个参数的扩大、缩小阴影。
- text-shadow:5px 5px 0px 3px lightgreen; color:green;
- text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
- text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
正值扩大阴影,负值缩小阴影。零的值可用于给文本加边(第三例)。
多阴影
简单的加边例子:
CSS Code复制内容到剪贴板- text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */
- text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), /* example 2 */
- 6px -6px 4px 2px rgba(255,255,255,0.25),
- -3px -3px 4px 6px rgba(255,0,255,0.15);
- text-shadow: 0 0 0 3px white, /* example 3: neon - 1 */
- 0 0 2px 6px magenta,
- 0 0 1px 9px white,
- 0 0 6px 12px magenta;
- color:magenta;
- text-shadow: 0 0 2px #fff, /* example 4: neon 2 */
- 0 0 4px 2px rgba(255,255,255,0.5),
- 0 0 6px 6px #f0f,
- 0 0 4px 7px #fff,
- 0 0 3px 15px #222,
- -4px 0 2px 9px #f0f,
- 4px 0 2px 9px #f0f,
- 0 -4px 2px 9px #f0f,
- 0 4px 2px 9px #f0f;
- color:white;
- text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
- color:magenta;
已经说过“spread”是css4的属性),但是你仍然用CSS3模拟:
CSS Code复制内容到剪贴板- text-shadow: 0px 0px 0px 4px magenta;
- /* is similar to: */
- text-shadow: magenta 0px 2px,
- magenta 2px 0px,
- magenta -2px 0px,
- magenta 0px -2px,
- magenta -1.4px -1.4px,
- magenta 1.4px 1.4px,
- magenta 1.4px -1.4px,
- magenta -1.4px 1.4px;
- text-shadow: 0 0 2px 2px white,
- 2px 0 2px 5px #222,
- 3px 0 3px 6px #933,
- 5px 0 2px 14px #222,
- 6px 0 5px 16px #533;
- background-color:#222;
- color:white;
text-shadow: 0px 2px 3px #555;
background-color:#333;
- text-shadow: 0 0 2px 3px yellow,
- 0 0 2px 6px orange,
- 0 0 2px 9px red,
- 0 0 2px 12px lime,
- 0 0 2px 15px blue,
- 0 0 2px 18px violet;
- text-shadow: 0 0 1px #999,
- 1px 1px 1px #888,
- 2px 2px 1px #777,
- 3px 3px 1px #666,
- 4px 4px 1px #555,
- 5px 5px 1px #444;
- background-color:#333;
- color:white;
- text-shadow: 2px 2px #fff,
- 3px 3px #666;
- .text {
- text-shadow:0 0 5px;
- }
- .text::first-letter {
- color:azure;
- text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
- }
CSS,text-shadow
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?