css3-11 如何设置文字的阴影

一、总结

一句话总结：text-shadow属性。text-shadow:3px 3px 3px #f0f;

1、text-shadow属性的参数依次是什么意思？

水平及垂直偏移

模糊距离（这个参数相当于ps里面的羽化半径）

颜色

2、所有阴影类的属性必备的三个属性是什么（带上颜色是四个）？

水平及垂直偏移

模糊距离（这个参数相当于ps里面的羽化半径）

二、如何设置文字的阴影

1、相关知识

文本样式:
1.text-shadow
text-shadow:3px 3px 3px #f0f;

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊的距离。 测试
color 可选。阴影的颜色。参阅 CSS 颜色值。 测试

2、代码

文字的阴影

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         p{

             text-shadow:3px 3px 3px #00f;

         }

     </style>

 </head>

 <body>

     <div>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

         <p>linux is very much!</p>

     </div>

 </body>

 </html>
 

css3-11 如何设置文字的阴影的更多相关文章

  1. 让CSS3给你的文字加上边框宽度，并实现镂空效果

    这次,我主要向大家介绍一下CSS3下的-webkit-text-stroke属性,并分享几个用该属性制作的镂空文字效果. 1.-webkit-text-stroke属性简介 CSS边框的一个不足就是只 ...

  2. css3购物网站商品文字提示实例

    css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...

  3. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  4. 用rem设置文字大小

    一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...

  5. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  6. PHP Imagick文字加阴影(外发光)

    PHP Imagick文字加阴影(外发光)<pre>$canvas = new \Imagick(); $canvas->newImage(500, 200, 'white'); $ ...

  7. iOS设置文字过长时的显示格式

    以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...

  8. css设置文字不换行，超过的部分用“...”代替

    设置文字不换行,超过的部分用“...”代替 overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: /*so ...

  9. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

随机推荐

  1. IIS6下AD域设置

    简介:IIS6下AD域设置 IIS6下AD域设置 http://files.cnblogs.com/files/KingUp/AD%E5%9F%9F%E8%AE%BE%E7%BD%AE.rar

  2. 洛谷P1852 奇怪的字符串

    题目描述 输入两个01串,输出它们的最长公共子序列的长度 输入输出格式 输入格式: 一行,两个01串 输出格式: 最长公共子序列的长度 输入输出样例 输入样例#1: 复制 01010101010 00 ...

  3. 洛谷P3954 成绩【民间数据】

    题目背景 数据已修复 题目描述 牛牛最近学习了C++入门课程,这门课程的总成绩计算方法是: 总成绩=作业成绩×20%+小测成绩×30%+期末考试成绩×50% 牛牛想知道,这门课程自己最终能得到多少分. ...

  4. Atcoder At Beginner Contest 068 D - Decrease (Contestant ver.)

    D - Decrease (Contestant ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem S ...

  5. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  6. OrmLite使用小结（一）

    在使用OrmLite过程中,遇到了不少问题.鉴于中文文档比較少,看英文文档又不知道怎样看起.仅仅能遇到问题查找解决方法并整理出来,如有错误,希望能指正! ** 1.模糊条件查询 ** 使用条件查询时. ...

  7. 数学定理证明机械化的中国学派（II）

    所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...

  8. jquery ui 分页插件 传入后台的连个參数名

    參数名: page .rows page=int(request.form.get('page',1).encode('u8')) rows1=int(request.form.get('rows', ...

  9. C++源文件到可运行文件的过程

    一.四个步骤    对于C/C++编写的程序,从源码到可运行文件,一般经过以下四个步骤: 1).预处理,产生.ii文件 2).编译,产生汇编文件(.s文件) 3).汇编,产生目标文件(.o或.obj文 ...

  10. 15个常用的javaScript正则表达式--来自于javascript公众号

    摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...