<!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. PAT乙级 1030. 完美数列(25)

    1030. 完美数列(25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定一个正整数数列,和正整数p,设这 ...

  2. 「linux」win+linux 双系统 默认启动项 的修改

    修改/etc/default/grub文件,其中的GRUB_DEFAULT表示默认启动项: sudo gedit /etc/default/grub 注意:启动项是从0开始计数. 要使修改生效需要运行 ...

  3. 【crunch bang】国内源

    /etc/apt/sources.list 因为测试需要,装完Debian7 后,更新为163的源,但是后来装软件时,一些软件依赖包还是装不上.后来把163源稍加改动,就好用了.163源内容如下: d ...

  4. oracle中的函数

    ORACLE中函数          Oracle已经内建了许多函数,不同的函数有不同的作用和用法,有的函数只能作用在一个记录行上,有的能够作用在多个记录行上,不同的函数可能处理不同的数据类型.常见的 ...

  5. linux终端快捷键

    tab 补全 ctrl+k 删除此处到末尾所有内容 ctrl+u 删除此处到开始所有内容 ctrl+a 将光标移至开始处 cttl+e 将光标移至结尾 ctrl+l 清屏 ctrl+c 删除整行或停止 ...

  6. django templates学习使用记录

    可以在基本模板中多插入几个black来适应不同的布局

  7. 关于 MySQL LEFT JOIN 你可能需要了解的三点

    即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定能让你学会点东西! ON 子句与 WHERE 子句的不同 一种更好地理解带有 WHERE ... IS NUL ...

  8. 【python cookbook】【数据结构与算法】8.与字典有关的计算问题

    问题:在字典上对数据执行各式各样的计算(比如求最小值.最大值.排序). 解决方案:利用zip()将字典的键-值对“反转”为值-键对序列. 例如:如下字典存放的股票名称和对应的价格: >>& ...

  9. 高并发 php uniqid 用md5生成不重复唯一标识符方案

    高并发 php uniqid 用md5生成不重复唯一标识符方案uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID.uniqid(prefix,more_entropy)prefix 可 ...

  10. ug-Assertion failure in [MyClass layoutSublayersOfLayer:]

    这是在iOS7上,tableview 的sectionHeaderView中报错 *** Assertion failure in -[****.****UITVSectionHeader_Team ...