CSS3添加阴影

一、使用text-shadow属性为文本添加阴影

二、使用box-shadow属性为边框添加阴影

一、为文本添加阴影 text-shadow

    使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）

    浏览器兼容：IE、Chrome、Firefox、Opera、Safari等所有主流浏览器都支持 text-shadow 属性。Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

（一）text-shadow用法

语法  text-shadow：h-shadow  v-shadow  blur  color；比如 :

  • #b1{text-shadow:5px 5px #aaa;} 表现效果  
  • #b2{text-shadow:-6px -6px #ccc;}  表现效果  
  • #b3{text-shadow:2px 2px 10px #000;}  表现效果    

text-shadow的四个值，（前三个值带长度单位，四个值之间不需逗号分隔）：

  • h-shadow   水平阴影的位置，值可以为负数（不可省略）
  • v-shadow   垂直阴影的位置，值可以为负数（不可省略）
  • blur              模糊的距离（可选）
  • color            阴影的颜色（可选）
  • none            默认值（text-shadow:none 可以取消文字的阴影效果）

注意：一个元素添加多个阴影样式，每组属性之间用逗号分隔，每个阴影有（2~3个）长度值和1 个可选的颜色值进行规定。省略的长度是 0。

实例：添加多个阴影样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css3文字阴影</title>

     <style>

     #box1{text-shadow:

         10px 10px red,

         20px 20px #ff0;

         }

     </style>

 </head>

 <body>

     <div id="box1">一个元素多个阴影样式</div>

 </body>

 </html>

表现效果

 （二） text-shadow应用

1、 白色文本的阴影效果

 #b1{color:white; text-shadow:2px 2px 4px #000;}

表现效果         

2、霓虹灯效果的文本阴影

#b1{text-shadow:0 0 3px #f0f;}

表现效果             

 二、为边框添加阴影 box-shadow

     使用box-shadow可以为元素本身添加阴影，即向边框添加一个或多个阴影。（不可继承）

     浏览器兼容：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 浏览器支持 box-shadow 属性。如果希望浏览器兼容旧的Android、Mobile Safari和Safari浏览器，那么box-shadow需要加上-webkit- 厂商前缀。

（一）box-shadow的用法

语法 box-shadow: h-shadow v-shadow blur spread color inset; 例如：

  • box-shadow:4px 4px 5px 3px #999;     表现效果  
  • box-shadow:4px 4px 5px #999;            表现效果   
  • box-shadow:-4px -4px 5px #999;         表现效果                                  （h-shadow 和 v-shadow设置为负值时阴影位置改变）

  • box-shadow:0 0 9px 3px #999;            表现效果       

box-shadow的六个值，如下：

  • h-shadow   水平阴影的位置，值可以为负数（不可省略）
  • v-shadow   垂直阴影的位置，值可以为负数（不可省略）
  • blur              模糊的距离（可选）
  • spread         阴影的距离（可选）
  • color            阴影的颜色（可选）
  • inset             将外部阴影(outset)改成内部阴影（可选）
  • none            默认值（box-shadow:none 可以取消边框的阴影效果）

注释：可向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 （2~4） 个长度值、1个可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

实例：添加多个阴影样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css3边框阴影</title>

     <style>

     #box1{

                 margin-top: 100px;

         margin-left:100px;

         background-color: #fff;

         width: 100px;

         height: 100px;

              box-shadow:

         2px 2px 10px red,

         5px 5px 20px blue;

         }

         </style>

 </head>

 <body>

     <div id="box1"></div>

 </body>

 </html>

表现效果

CSS3文本阴影、边框阴影的更多相关文章

  1. 【边框】-边框阴影-box-shadow

    CSS3之box-shadow边框阴影 div{box-shadow: 10px 10px 5px #888888;} 来自为知笔记(Wiz)

  2. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  3. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

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

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

  6. CSS3边框 阴影 box-shadow

    box-shadow是向盒子添加阴影.支持添加一个或者多个. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: box-sh ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  9. Qt之阴影边框(转)

    原文地址:http://blog.sina.com.cn/s/blog_a6fb6cc90101eoc7.html 阴影边框很常见,诸如360以及其他很多软件都有类似效果,了解CSS3的同学们应该都知 ...

随机推荐

  1. oracle rman catalog--ORA-01580: error creating control backup file

    在测试rman catalog时,错误的设置了snapshot路径,报错 RMAN> show snapshot controlfile name; RMAN configuration par ...

  2. .net core 学习小结之 Cookie-based认证

    在startup中添加授权相关的管道 using System; using System.Collections.Generic; using System.Linq; using System.T ...

  3. Linux 项目上线流程

    命令行样式修改 1 打开配置文件vim /etc/bashrc2 添加配置信息PS1="\[\e[37;40m\][\[\e[32;1m\]\u\[\e[37;40m\]@\h \[\e[3 ...

  4. MySql 性能优化之 Explain

    MySQL 之 Explain 输出分析 背景 前面的文章写过 MySQL 的事务和锁,这篇文章我们来聊聊 MySQL 的 Explain,估计大家在工作或者面试中多多少少都会接触过这个.可能工作中实 ...

  5. python 并发编程 多进程 JoinableQueue

    JoinableQueue和Queue 使用一样 这就像是一个Queue对象,但队列允许项目的使用者通知生成者项目已经被成功处理.通知进程是使用共享的信号和条件变量来实现的. JoinableQueu ...

  6. Simplify Path（路径简化）

    问题: 来源:https://leetcode.com/problems/simplify-path Given an absolute path for a file (Unix-style), s ...

  7. [Python3] 042 日志

    目录 LOG 1. 日志相关概念 1.1 日志的级别 level 1.2 LOG 的作用 1.3 日志信息 1.4 成熟的第三方日志 1.5 注意 2. Logging 模块 2.1 日志级别 2.2 ...

  8. vue+express利用token 完成前后端登录

    token是后端给前端的一个二维码, 这个二维码一般是暗码,  前端拿着这个二维码到后端, 后端便可以通过这个二维码得知用户是否登录过, 用户是谁等信息(具体什么信息,是后端在返回token时候设置的 ...

  9. 数塔 Medium

    Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to look hot at the ...

  10. CyclicBarrier、CountDownLatch、Callable、FutureTask、thread.join() 、wait()、notify()、Condition

    CyclicBarrier使用: import java.util.Random; import java.util.concurrent.BrokenBarrierException; import ...