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. unlink- ctf-stkof

    stkof 程序下载:https://pan.baidu.com/s/1_dcm8OFjhKbKYWa3WBtAiQ 提取码:pkyb unlink 基础操作 # define unlink #def ...

  2. 【BW系列】SAP BW实时抽取ECC数据的实现

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[BW系列]SAP BW实时抽取ECC数据的实现 ...

  3. python+selenium下载文件——firefox

    修改Firefox的相关配置. 1.profile.set_preference('browser.download.folderList',2) 设置成0代表桌面,1代表下载到浏览器默认下载路径:2 ...

  4. Spring中单例模式中的饿汉和懒汉以及Spring中的多例模式

    链接:https://pan.baidu.com/s/1wgxnXnGbPdK1YaZvhO7PDQ 提取码:opjr 单例模式:每个bean定义只生成一个对象实例,每次getBean请求获得的都是此 ...

  5. [Web 前端] 033 Vue 的简单使用

    目录 0. 方便起见,定个轮廓 1. v-model 举例 2. v-for 举例 3. v-if 举例 4. 事件绑定 举例 5. v-show 举例 0. 方便起见,定个轮廓 不妨记下方的程序为 ...

  6. DockerFile与镜像(Image)仓库

    深入Docker 之 Image: 当我们使用docker pull mysql 这个命令获取镜像的时候,到底他是怎么做的?我们登录官方提供的仓库看一下 https://github.com/dock ...

  7. ls 命令通配符（3）

    使用过正则的人应该很熟悉通配符.如果非要解释的话,我找来一段: 通配符是一种特殊语句,主要有星号(*)和问号(?),用来模糊搜索文件. 当查找文件夹时,可以使用它来代替一个或多个真正字符:当不知道真正 ...

  8. Y7000 安装ubuntu16.04.6 的tips :禁用nouveau 、Wifi 问题 、nvidia 驱动安装

    由于最近要跑DeepLearning 所以在自己的Y7000上装一个Ubuntu ,自己碰了好多壁 写下来以防止自己忘掉以便后续再用! 配置:i7-8750H +GeForce GTX 1050Ti ...

  9. Scrapy 教程(二)-操作流程

    scrapy 是个爬虫框架,是由python编写的,用法类似 django 框架. 创建工程 在开始爬虫之前,先创建工程 scrapy startproject projectname 目录结构如下图 ...

  10. 结构体指针，C语言结构体指针详解

    结构体指针,可细分为指向结构体变量的指针和指向结构体数组的指针. 指向结构体变量的指针 前面我们通过“结构体变量名.成员名”的方式引用结构体变量中的成员,除了这种方法之外还可以使用指针. 前面讲过,& ...