用CSS3实现文字描边效果【效果在这儿,创意在你!】
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。
这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:
- text-shadow:10px 5px 2px #f60;
各位置参数说明:
- text-shadow:x位移 y位移 模糊程度 颜色
其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。
现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。
写法如是:
- -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
- *filter: Glow(Color=#000, Strength=1);
这个针对各主流浏览器做了适配的写法。
原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!
<!--EndF-->
用CSS3实现文字描边效果【效果在这儿,创意在你!】的更多相关文章
- CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- 用CSS3实现文字描边
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...
- CSS3实现文字描边的2种方法
问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- CSS3实现文字描边
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -moz-text-shadow:#000 1px ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- Ubuntu 10.04 安装流程
ubuntu 10.04 安装流程 需安装libxrender-dev才能跑html5 来自为知笔记(Wiz)
- LevelDB场景分析1--整体结构分析
基本用法 数据结构 class DBImpl : public DB { private: struct CompactionState; struct Writer;// Infor ...
- SIPp常用脚本之一:register注册
SIPp,VOIP并发测试.性能测试的神器. 本文记录一下常用的脚本文件. 一.reg.xml 此文件是sipp的执行的脚本流程. <!-- --> <!-- You should ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- java Webservice(一)HttpClient使用(一)
1.拳头之Get/Post拳头是最基本的一重武器,也是最重要的,好比练武之人必须先扎稳马步. java 代码 HttpClient httpclient=new HttpClient();//创建一个 ...
- 摘记—Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Cha
What a Unicode string ? The binaries in RAM have the final word. NOT string literals in Text Editor( ...
- SGMII 和 Serdes 的详细说明
Serdes : SERDES是英文SERializer(串行器)/DESerializer(解串器)的简称.它是一种时分多路复用(TDM).点对点的通信技术,即在发送端多路低速并行信号被转换成高速 ...
- Java 如何实现线程间通信
正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了. 本文涉及到的知识点: thread.join(), object. ...
- innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...
- vue-cli脚手架里如何配置屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...