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. 清除celery 任务队列

    celery 有密码的时候 清除任务 redis-cli -h host -p port -a password -n 11 ltrim transcode 0 196 没有密码的时候 redis-c ...

  2. 004 python 流程控制语句

    流程控制语句 1.if判断 语法 a = 10,b = 20# 1if a == 10:  print('a等于10')# 2if a > b:  print('a大于b')else:  pri ...

  3. 【重构】C# VS 配置引用程序集的路径（分离exe和dll从指定路径调用）

    原文:[重构]C# VS 配置引用程序集的路径(分离exe和dll从指定路径调用) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CocoWu892 ...

  4. BZOJ 3675 APIO2014 序列切割 斜率优化DP

    题意:链接 方法:斜率优化DP 解析:这题BZ的数据我也是跪了,特意去网上找到当年的数据后面二十个最大的点都过了.就是过不了BZ. 看到这道题自己第一发DP是这么推得: 设f[i][j]是第j次分第i ...

  5. Linux下进程终止过程

    不管是在什么系统中,当进程终止之后.系统都须要释放进程占有的资源. 否则.系统资源会被耗尽. 以下将具体说明Linux系统中,进程终止的过程. 进程终止方式 linux的进程终止方式有8种,当中5种是 ...

  6. UITouch 的使用

    直接上代码: touch 的四大状态.: // // TouchView.m // UI_practice_04 // // Created by lanouhn on 15/4/22. // Cop ...

  7. 自定义控件学习——下拉刷新ListView

    效果 开始用Android Studio写了,还有挺多不明白这IDE用法的地方....蛋疼 主要思路 1. 添加了自定义的头布局    2. 默认让头布局隐藏setPadding.设置 -自身的高度  ...

  8. 快速傅里叶变换FFT(模板)

    好不容易闲下来总结一下FFT.QAQ 1.DFT: 对于多项式的乘法,DFT给了我们新的思路(点值表达式的O(n)相乘) 对于我们习惯的多项式算法例如多项式A(x)=5x+1和B(x)=2x+2 C( ...

  9. Javascript和jquery事件--键盘事件KeyboardEvent

    Js和jq事件—键盘事件KeyboardEvent 键盘事件keydown,keypress和keyup,还需要涉及到一个文本事件textInput. keydown,keypress和keyup事件 ...

  10. 学习笔记：Vue——组件和Prop

    前言:这一篇是关于组件基础.组件注册.Prop等内容. 1.组件基础 01.组件是可复用的Vue实例 02.组件中的data选项必须是一个函数 03.一个组件默认可以有任意数量的prop 任何值都可以 ...