CSS阴影详解
作者:神采飞扬 来源:前端观察 发布时间:2009-12-04 18:31:00
设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合:
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
....
这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,这又要让你面对该死的IE 6的png透明问题!
事实上,对于文字的阴影效果,我们完全可以用CSS来实现!
可以查看查看demo先。
Text-shadow
text-shadow可以让我们实现完美的文字阴影效果。基本写法:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...或者
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
这里的颜色就是阴影的颜色,你可以将颜色写在前面,也可以写在最后。x轴和y轴分别是其阴影的偏移位置,模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影,你可以用逗号分开多组设置(当然也可以只是用单个设置)。
示例:
h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial;
text-indent:2em;
text-shadow:black 2px 2px 2px; }
效果如下图
该属性目前被除IE之外的
filter: Shadow(Color='black', Direction='135', Strength='2')
你可能已经注意到,使用shadow滤镜只能定义角度 direction,而不能定义xy轴,z轴也被换成了strength。注意,使用该滤镜的时候,不能够设置背景颜色,否则滤镜将无效!另外如果你的数学不是很好,不太懂三角函数的算法,你可以使用IE的另外一个滤镜:dropshadow:
filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
好吧,IE总是会拖我们的后腿,不过值得一提的是,IE的这两个滤镜是支持多层阴影的!比如,可以这样写:
filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
欲了解更多关于IE的这两个滤镜,请查看:Shadow 和 Dropshadow
让我们看一个多层阴影的例子(这里无视了IE):
h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
效果如图:
这里我们使用到了rgba色彩,它是一种在CSS中同时声明颜色及其透明度的一种方法,且被大多数A级浏览器支持的色彩属性(除了IE),了解更多请查看:《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。
猜你喜欢
- 1、什么是游标?一张图讲述游标的功能:图示说明:2、使用游标的好处?如果不使用游标功能,直接使用select查询,会一次性将结果集打印到屏幕
- Tkinter 实现上述功能并不复杂,只要使用 Tkinter 的相关组件和一些简单的逻辑处理即可,在编写这个案例的过程中大家要做到温故而知
- 在项目中发现这样一个问题:sqlserver数据库编码为gbk,使用python3.4+pymssql 查询,中文乱码,经过一番思考问题解决
- java的简单介绍Java是一种通用的面向对象编程语言,旨在生成可在任何地方使用相同代码的代码。这种编程语言是基于类的,面向对象的和人类可读
- 所有人都知道select top 的用法,但很多人还不知道update top 和 delete top 怎么用。以往的做法是set row
- # -*- coding: utf-8 -*-class Heap(object): @classmet
- 一、property() 函数讲解了解 @property 装饰器之前,我们首先要了解内置函数的 property()。class prop
- 我就废话不多说了,还是直接上代码吧!import osimport xml.dom.minidomimport cv2 as cvImgPa
- 这是网站制作很流行的下拉列表两级连动的代码,也是很多人使用的代码。下面,先来看这段代码:<%dim countset&nbs
- 本文主要研究的是python读取jpg格式图片并显示为16进制的相关内容,具体如下。代码:>>> aaa = open(&
- Python的turtle模块画国旗主要用到两个函数:draw_rentangle和draw_star。至于函数的调用就和我们学的C,C++
- Mac 下 Flask 框架 workon命令找不到 ---- 最终解决方案(详解具体实现操作过程中遇到的坑)2018年08月17日 00:
- 前言原理:Windows逆向,通过内联汇编的形式调用发消息的函数下面的代码PC微信版本是:3.7.0.26 , python使用的32位的3
- #coding=utf-8#对话框import sysfrom PyQt4 import QtGui, QtCoreclass Window
- 一、变量1.变量Python 中的变量不需要声明。每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建。在 Python 中,变量就是变
- 在实际的机器学习项目中,我们通常需要将训练好的模型保存到磁盘,以便在以后的时间点进行推理或重新训练。同样地,我们也需要从磁盘加载模型以供使用
- 如下所示:import logging # 创建一个logger logger = logging.getLogger('mylog
- 做数据分析、科学计算等离不开工具、语言的使用,目前最流行的数据语言,无非是MATLAB,R语言,Python这三种语言,但今天小编简单总结了
- 本文实例讲述了Python查找最长不包含重复字符的子字符串算法。分享给大家供大家参考,具体如下:题目描述请从字符串中找出一个最长的不包含重复
- 访问者模式我觉得Visitor模式是在补修改已有程序结构前提下,通过添加额外的访问者完成对代码功能的拓展 为什么这样用?当你的类层次较多,在