• 投影的设置
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250,250,250,0.1)));
  • 文字投影
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .1)));
  background: #080808;
-webkit-background-clip: text;
/* 以上两个原理,利用文字当蒙板,反向透出背景色,然后背景色想怎么渐变怎么渐变,设置成图片都没问题 */
-webkit-text-fill-color: transparent;
/* 给文字做镂空效果 */
  • 文字描边
    text-shadow: 1px 1px #ff696a, -1px -1px #ff696a, 1px -1px #ff696a, -1px 1px #ff696a, 0 0.06rem 0.06rem #fc842c;
  • 终极:文字渐变 + 投影
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .1)));
background: -webkit-linear-gradient(top, #FFEB3B 37%,#009688 66%,#FFC107 65%,#FFEB3B 100%);
/* 实际是背景色渐变,但是只展示文字区域的背景色。此时的文字不是文字,而是文字外形构成并透出的背景色 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

css - 文字元素等的美化效果代码汇总(更新中...)的更多相关文章

  1. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  2. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  3. 知道创宇爬虫题--代码持续更新中 - littlethunder的专栏 - 博客频道 - CSDN.NET

    知道创宇爬虫题--代码持续更新中 - littlethunder的专栏 - 博客频道 - CSDN.NET undefined 公司介绍 - 数人科技 undefined

  4. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  5. web自动化测试,定位不到元素的原因及解决方案(持续更新中2018年9月29日)

    主要讲自己在实战中遇到的坑: 1.动态id定位不到元素 分析原因:每次打开页面,ID都会变化.用ID去找元素,每次刷新页面ID都会发生变化. 解决方案:推荐使用xpath的相对路径方法或者cssSel ...

  6. 【Android 应用开发】 Android 相关代码规范 更新中 ...

    . 简介 : Android 常用的代码结构, 包括包的规范, 测试用例规范, 数据库模块常用编写规范; 参考 : 之前写的一篇博客 [Android 应用开发] Application 使用分析 ; ...

  7. 自己用的一套reset.css,打算整理一下方便以后用,持续更新中,各位大神,不喜勿喷

    *{margin: 0; padding: 0;border:none;}img{vertical-align: top;width: 100%;border: none;}ul,li{list-st ...

  8. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  9. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

随机推荐

  1. ICMP Ping模版实现对客户端网络状态的监控

    Zabbix使用外部命令fping处理ICMP ping的请求,fping不包含在zabbix的发行版本中,需要额外去下载安装fping程序,安装完毕之后需要zabinx_server.conf中的参 ...

  2. fedora26 编译内核出现Can't use 'defined(@array)' 错误

    cd /kernel/ vim timeconst.pl 把373行中的if (!defined(@val)) { 改为if (!@val) {

  3. Java JVM运行时数据区,内存管理和GC垃圾回收

    一 . 运行时数据区 程序计数器是线程私有的,是一块很小的内存空间,是当前线程执行到字节码行号的计数指示器.每个CPU处理器核心 在任何一个时刻,都只可能运行着唯一的一个线程,执行着一条指令.所以在多 ...

  4. Linux 系统目录介绍

    bin : bin 是Binary 二进制的缩写,就是可执行文件了.Bin目录下是用户常用的命令. sbin: 此目录下也是二进制文件 ,不过这里的命令是 超级用户如 root 这样的用户使用的. e ...

  5. 腾讯游戏设计(tgideas.qq.com)回复处CSRF任意换马甲

    http://tgideas.qq.com GET /cgi-bin/comments/sendreply.cgi?iActivId=1&iSubActivId=215722&iPar ...

  6. java新手的session初体验

    众所周知,session作为保存我们用户对话所需要的信息的对象,在我们的项目中必不可少.作为菜鸟学习java的第一课就是了解它的思想和用法,在以后的学习中,逐渐学习和总结,从基础到高级,慢慢学会应用. ...

  7. 17 HTTP编程入门

    http请求原理 http请求原理我就不多说了,网上一搜就能搜索到,下面我注意是记录下http模块的使用方法 http 模块 HTTP-server hello world 我们使用HandleFun ...

  8. java http post上传文件

    1.上传接口 @IgnoreToken @RequestMapping(value = "/upload/cpicFile", method = RequestMethod.POS ...

  9. 06-Linux RPM 命令参数使用详解

    rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由 RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组 ...

  10. scala spray 概念性内容的总结

    spray 是基于 akka 的轻量级 scala 库,可用于编写 REST API 服务.了解 spray 的 DSL 后可以在很短的时间内写出一个 REST API 服务,它的部署并不需要 tom ...