<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>css3效果</title>

<style>

table{width: 500px; border-collapse: collapse; border:1px solid #ccc;}

table tr td{ height: 24px;border:1px solid #ccc; transition: all 300ms; background: rgb(250,250,250)}

tbody:hover td {

    color: transparent;

    text-shadow: 0 0 3px #aaa;

}

tbody:hover tr:hover td {

    color: #444;

    text-shadow: 0 1px 0 #fff;

}

</style>

<body>

<table>

    <tbody>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

        <tr>

            <td>000</td><td>1111</td>

        </tr>

    </tbody>

</table>

</body>

</html>

效果图如下：鼠标移到哪一行，哪一行就清楚，其他的好像有一层毛玻璃遮住一样的效果

滤镜模糊效果，利用了文字阴影和透明。其实是抄的iSlider官网的的更多相关文章

  1. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  2. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  3. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  4. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  6. CSS利用filter/opacity实现背景透明

    先看看众所周知的解决方案 如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=);/*IE浏览器*/ op ...

  7. android:text 文字阴影设置

    <SPAN style="FONT-SIZE: 16px"><TextView  android:id="@+id/text"       a ...

  8. 酷炫，用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  9. css学习_css文字阴影、盒子阴影

    文字阴影和盒子阴影的用法: 多阴影

随机推荐

  1. SQL 中逻辑运算符的优先级

    三个逻辑运算符: NOT AND OR 它们的优先级依次降低(跟多数的高级程序设计语言的优先级顺序一致) 如果要提升某部分的优先级,可以使用半角括号实现 (这点也跟多数高级程序设计语言一致)

  2. 使用sysprep克隆虚拟机

    1.虚拟机安装windows2008 x64 r2 2.安装完毕后,运行”c:\windows\system32\sysprep\sysprep.exe” 3.选择”进入系统全新体验(OOBE),勾选 ...

  3. zw版【转发·台湾nvp系列Delphi例程】HALCON HighpassImage

    zw版[转发·台湾nvp系列Delphi例程]HALCON HighpassImage unit Unit1;interfaceuses Windows, Messages, SysUtils, Va ...

  4. 50136142WXY的百度地图

    50136142WXY的百度地图 [试题描述] 社团里的WXY童鞋今天要出去旅游啦(他现在在北京为1号城市),决定去朝鲜平壤(N号城市).但是很穷的WXY没有钱坐飞机,只好坐汽车去朝鲜了.但是车上的百 ...

  5. HGE游戏引擎之hgeQuad结构体的使用(用于渲染图片)

    HGE基本的渲染图元是hgeQuad (Quad is the basic HGE graphic primitive),其中有一个hgeVertex成员结构,它用来描述图元顶点信息.The hgeV ...

  6. shell 条件测试语句三种方法

    1.test -f file  2.[ -f file ] 3.[[ -f file ]] [ -f file1 -a -f file2]逻辑与[ -f file1 -o -f file2]逻辑或 [ ...

  7. Failed to read auto-increment value from storage engine, Error Number: 1467

    重设auto_increment:ALTER TABLE tableName auto_increment=number

  8. JSP注意点

    一.JSP页面会编译成一个Servlet类,每个Servlet在容器中只有一个实例:在JSP中声明的变量是成员变量,成员变量只在创建实例时初始化,该变量的值将一直保存,直到实例销毁: 二.输出表达式& ...

  9. JavaEE基础（二十七）/反射、JDK新特性

    1.反射(类的加载概述和加载时机) A:类的加载概述 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载  就是指将class文件读入 ...

  10. js原型 prototype

    js中只有构造函数(所有函数)拥有prototype属性对象