css3 文字的设置
1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;color: yellowgreen;}
2.-webkit-text-stroke 描边的文字: -webkit-text-stroke: 1px yellow 描边为1px
3.box-reflect 文字倒影: -webkit-box-reflect: below 10px; 文字和倒影之间相隔10px, -webkit-box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3)); 可使用Gradient图像或image作为遮罩。
4.text-fill-color 文字填充 -webkit-text-fill-color:#f00; 直接填充, -webkit-text-fill-color:transparent;-webkit-text-stroke:1px #000; 镂空文字。
background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; 渐变文字。
background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; -webkit-text-stroke:1px transparent; 加上描边,效果会更好一点。
line-height:320px; height:320px; width:100%; text-align:center; letter-spacing:-2rem; font-size:15rem; font-weight:bolder; background:url(../img/bg.gif) repeat center center; -webkit-text-fill-color:transparent; -webkit-background-clip:text;
可以放一个gif,效果也是可以的。
css3 文字的设置的更多相关文章
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
- CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
随机推荐
- RobotFramework自动化测试框架-常用断言关键字
断言关键字 描述 Should Be Empty 判断是否为空,如果不为空,执行失败,示例: ${value} Set Variable Hello Should Be Empty ${value} ...
- Bzoj5093: 图的价值
题面 Bzoj Sol 一张无向无重边自环的图的边数最多为\(\frac{n(n-1)}{2}\) 考虑每个点的贡献 \[n*2^{\frac{n(n-1)}{2} - (n-1)}\sum_{i=0 ...
- Spark ML源码分析之一 设计框架解读
本博客为作者原创,如需转载请注明参考 在深入理解Spark ML中的各类算法之前,先理一下整个库的设计框架,是非常有必要的,优秀的框架是对复杂问题的抽象和解剖,对这种抽象的学习本身 ...
- 深度剖析HashMap的数据存储实现原理(看完必懂篇)
深度剖析HashMap的数据存储实现原理(看完必懂篇) 具体的原理分析可以参考一下两篇文章,有透彻的分析! 参考资料: 1. https://www.jianshu.com/p/17177c12f84 ...
- Java遍历二叉树深度宽度
节点数据结构 class TreeNode { TreeNode left = null; TreeNode right = null; } 最大深度,基本思路是:使用递归,分别求出左子树的深度.右子 ...
- C++输入输出总结_输入
1. 输入输出的本质 C++中的输入输出都是通过流来进行的,而具体的输出输入都是通过对流进行操作来完成的,一般为定向一个流(重定向),清空流,向流里边添加新的元素.C++把输入输出看做字节流,输入时从 ...
- [转]What is a WebRTC Gateway anyway? (Lorenzo Miniero)
[转]What is a WebRTC Gateway anyway? (Lorenzo Miniero) https://webrtchacks.com/webrtc-gw/ As I mentio ...
- Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...
- 关于browser-sync(在多个设备上进行网页调试)的问题点总结
最近在看响应式网站的开发视频,其中有一部分非常有用,就是在多个设备上进行网页调试,通过使用browser-sync来实现,具体的步骤可以参照官网(http://www.browsersync.cn/) ...
- 【C#点滴记录】ASP.NET 使用C# 导出Word 和Excel
原文摘自 慧优米网,链接地址:http://huiyoumi.wang/upload/forum.php?mod=viewthread&tid=797&extra= 好了正文来了 今天 ...