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. logout命令用于退出当前登录的Shell

    logout命令用于退出当前登录的Shell

  2. C++集合运算函数总结 & 需要有序集合的操作

    前提:两个集合已经有序.merge() //归并两个序列,元素总个数不变,只是将两个有序序列归并为一个有序序列.set_union() //实现求集合A,B的并.set_difference()//实 ...

  3. python核心编程五——映像和集合

    1.字典 不同意一个键相应多个值:当有键发生冲突(即.字典键反复赋值),取最后(近期)的赋值. >>> dict1 = {' foo':789, 'foo': 'xyz'}     ...

  4. 将NSTimer加入至RunLoop中的两种方法差别

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. 3. CONFIGURATION官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3. CONFIGURATION 3.1 Broker Configs 3.2 Pr ...

  6. $.post()提交了数据,return不给跳转

    本来Controller接到普通请求,return “somePage”,这样就跳转了.前台用$.post()提交了数据(不需要回调),我了个大草,return那里就不给跳转了这样怎么解决? ajax ...

  7. 【agc009b】Tournament

    Description 一场锦标赛有n个人,总共举办n-1次比赛,每次比赛必定一赢一输,输者不能再参赛.也就是整个锦标赛呈一个二叉树形式.已知一号选手是最后的胜者,以及对于i号选手(i>1)都知 ...

  8. BZOJ3262: 陌上花开(三维偏序，CDQ分治)

    Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),用三个整数表示. 现在要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量. 定义一朵花A比另一朵花B要美 ...

  9. oracle学习之路（二）------数组类型/记录类型的使用

    Oracle记录类型介绍 RECORD:用户自己定义数据类型,由单行多列的标量构成的复合数据类型.它将一个或多个标量封装成一个对象进行操作记录不能够总体拿来比較也不能够总体推断为空.能够总体拿来赋值. ...

  10. [React] Theme your application with styled-components and "ThemeProvider"

    In this styled-components lesson, we set a "primary color" within a UI "theme" o ...