css彩虹文字
用CSS3实现彩虹文字的效果,只在Webkit内核的浏览器(谷歌浏览器或移动端)上有效果。
background-image:
-webkit-gradient(linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f),
color-stop(0.3, #22f),
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2),
color-stop(0.9, #ff2),
color-stop(1, #f22));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
来看看具体的效果:
原理是将文字设置为透明,然后通过背景图片中的渐变给透明的文字上色。
"有时候,虽然能想明白,但心里就是接受不了。"
css彩虹文字的更多相关文章
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- css控制文字长度,超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
- (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号
css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...
- 用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
- --css 控制文字多使用省略号
--css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- CSS实现文字竖排排版
CSS实现文字竖排 注意: writing-mode: vertical-rl;存在兼容性问题,在IE上正常,在谷歌的低版本上可能识别不了. 如果文字少的话考虑直接在每一个文字中间加一个<br& ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
随机推荐
- WPF 修改Webbrowser的IE版本小程序(32位)
偶尔用Winform的Webbrowser,但是ie版本太低. 手改改注册表了太慢了. 弄个了程序,修改的代码时网上的,自己就是写了个界面. 支持IE11. XAML页面代码 <Window.R ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- MySQL中的group_concat函数的使用
本文通过实例介绍了MySQL中的group_concat函数的使用方法,比如select group_concat(name) . MySQL中group_concat函数 完整的语法如下: grou ...
- SpringBoot(16)—@ConditionalOnBean与@ConditionalOnClass
@ConditionalOnBean与@ConditionalOnClass 上一篇讲的@Conditional可以通过条件控制是否注入Bean,这篇讲下有关Bean其它几个常用的注解使用方式 @Co ...
- H5 移动端 键盘遮挡焦点元素解决方案
前言 最近在做 webapp,遇到了很多移动端兼容的问题,其中一个问题就是:输入框触发 focus 后,键盘弹出,然后遮住了输入框. 然后在Android和IOS上,这个问题的表现形式不一样,而原生键 ...
- 「SAP 技术」SAP BP显示供应商账户组时候的怪现象
SAP BP显示供应商账户组时候的怪现象 BP事务代码显示某个vendor的时候,笔者发现对于账户组字段选项列表里,不显示当前vendor的account group. 如下图,该供应商的accoun ...
- 在Dynamis CRM中打造一键保存关闭刷新案例的功能
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复172或者20151114可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 我们知道在Dynamics CR ...
- Socket简单实现ssh笔记
Scoket概念: socket本质上就是在2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递. 我们知道网络 通信 都 是基于 ip+port 方能定位到目标的具体机器上 ...
- 微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...
- Gradle Wrapper简述
个人博客:http://www.enjoytoday.cn Gradle更多介绍参考:http://www.enjoytoday.cn/categorys/Gradle 案例源码:GitHub gra ...