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. tee---读取标准输入，将内容输出成文件

  2. 小米开源文件管理器MiCodeFileExplorer-源码研究(7)-Favorite收藏管理和SQLite数据库CRUD

    FavoriteDatabaseHelper,存储favorite数据,到SQLite数据库.SQLiteOpenHelper是一个帮助管理数据库和版本的工具类.通过继承并重载方法,快速实现了我们自己 ...

  3. bootstrap之Orientation

    Orientation 调整屏幕方向的操作. package io.appium.android.bootstrap.handler; import android.os.RemoteExceptio ...

  4. apache2 虚拟机多用户多站点设置 mpm-itk

    MPM设置 https://bbs.csdn.net/topics/390479795/ vim /opt/lampp/etc/extra/httpd-ssl.conf vim /opt/lampp/ ...

  5. 35.Intellij IDEA设置忽略部分类编译错误

    转自:https://www.aliyun.com/jiaocheng/290360.html 有些时候我们的项目中有些错误,但这些错误并不影响项目的整体运行(或许是没有使用到),默认情况下idea是 ...

  6. DG动态性能视图详解

    V$LOG 显示CONTROLFILE记录的LOG FILE信息. 列名          描述 GROUP#        日志组号 THREAD#       日志线程号 SEQUENCE#    ...

  7. 洛谷 P3654 First Step (ファーストステップ)

    洛谷 P3654 First Step (ファーストステップ) https://www.luogu.org/problemnew/show/P3654 题目描述 可是……这个篮球场,好像很久没有使用过 ...

  8. Nodejs源代码分析之Path

    今天介绍一下nodejs Path的源代码分析,Path的API文档在https://nodejs.org/dist/latest-v5.x/docs/api/path.html,使用相对简单,在AP ...

  9. Ubuntu配置sublime text 3的c编译环境

    新建编译系统 c语言 选择tool –> Build System –> New Build System 然后输入下面代码 { "shell_cmd": " ...

  10. $(dom).each(index,ele){} 真正的jquery对象

    1.$(ele)才是each真正的jquery对象,而不是ele.$('.mt-story-info').each(function(index,ele){ if($('.mt-story-info' ...