• css3应用之自定义选中文字的背景颜色


    在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理。其实这样是很符合用户体验的。因为有很多的人会用鼠标选择着一行一行的阅读。其中就包括本人。。。

    浏览器中默认的选中的文字颜色为白色,背景色为蓝色。

    我们如何自定义呢?

    效果参见本博客,选中文字后可以见到效果。本博客中用到的代码是

    body ::selection {color:#FFFFFF;text-shadow:none;}
    body ::-moz-selection {color:#FFFFFF;background-color:#C2300B;text-shadow:none;}
    注意这里是两个冒号,不同于一般伪类的单冒号,此属性应用的css3属性

    body标签可以根据需要修改。color是选中后文字的颜色,background-color为选中文字的背景色。由于本站文字采用了text-shadow属性,而在文字选中后阴影会导致文字模糊,所以这里将阴影去掉。

    ok,就这么简单。其他可以自由发挥了。。。


    注意要点:

    • ie6,7,8版本不支持此属性,ie9,10未测试。
    • firefox和其他webkit浏览器,实现代码有不同(body::-moz-selection{})
    • fierfox中选中的文字存在间距,chrome中为整块选中状态,行与行之间不存在间距。

     

  • 相关阅读:
    开始准备考研了
    ubuntu安装完vbox没有无缝模式
    Terminator快捷键
    ubuntu启动慢显示waiting for network configuration
    terminal快捷键
    openstack根据软件选择实例resume
    输出数组的全排列
    给非同步的集合加锁原理。
    集合框架—ArrayList的用法
    集合框架 Map的小例子
  • 原文地址:https://www.cnblogs.com/laneyfu/p/4192078.html
Copyright © 2020-2023  润新知