CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用:

1,盒子阴影
(1)盒子阴影的属性是 box-shadow
1
box-shadow:5px 5px 10px gray;
前两个值分别表示阴影水平方向和垂直方向的偏移量。
第三个值表示模糊距离。最后一个值是阴影颜色。
 
(2)盒子阴影是可以随着盒子形状而自动变化的
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)

(3)如果盒子下面有内容的话,可以使用 rgba() 函数,将阴影颜色设置为半透明的
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
1
box-shadow:5px 5px 10px rgba(0,0,0,0.5);

(4)伸展范围设置
在模糊距离后面还可以添加一个值,表示伸展范围(spread)。用来增大模糊边界之前的实心颜色面积。
下面昨天是未设置伸展范围,右图设置了:
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
1
box-shadow:5px 5px 10px 5px gray;

(5)在颜色后面加上 inset 用来创建内部阴影
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
1
box-shadow:5px 5px 10px gray inset;

2,文本阴影 
文本阴影的属性是 text-shadow。其值顺序与盒子阴影有所不同,先要指定颜色,接着才是水平和垂直偏移量,最后是模糊值。
原文:CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
1
text-shadow: gray 10px 10px 7px;

CSS3 --添加阴影(盒子阴影、文本阴影的使用)的更多相关文章

  1. 【Web】CSS实现抖音风格字体效果(设置文本阴影)

    简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...

  2. CSS3文本阴影、边框阴影

    CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow     使用text-shadow,可以 ...

  3. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  4. CSS3 一、文本阴影text-shadow属性

    文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 <!DOCTYPE html> <html lang="en"> ...

  5. css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))

    1.圆角边框  border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...

  6. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  7. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  8. canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

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

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

随机推荐

  1. 怎样设计REST中间件---中间件JSON对数据库数据的组织

    怎样设计REST中间件---中间件JSON对数据库数据的组织 SQL查询语句有:select SQL非查询语句有:insert, update, delete 三种 中间件JSON对数据库数据的组织也 ...

  2. GoodSync

    文件管理这件看 似简单的事,真的不简单,因为为了防止意外情况,你需要对文件进行备份,时间一久随着文件数量的增加,再加上有时也会临时队备份文件进行修改等.再想查出 这个是最新的.文件有木有全部备份等…. ...

  3. Unity Dotween build error

    unity这东西感觉挺坑 在mac上build的时候遇到error IL2CPP error for method 'System.Void DG.Tweening.DOTweenPath::DORe ...

  4. log4j教程 3、架构

    Log4j API设计为分层结构,其中每一层提供了不同的对象,对象执行不同的任务.这使得设计灵活,根据将来需要来扩展. 有两种类型可用在Log4j的框架对象. 核心对象: 框架的强制对象和框架的使用. ...

  5. linux /boot目录下的文件分析

    一. Linux 启动流程 首先说一下Linux系统大概的启动过程: 1. 主机加电后, 系统首先加载BIOS, 这个BIOS是以写在主板上的. 2. BIOS启动后,执行一些例如开机自检,硬件初始化 ...

  6. 转:深度学习斯坦福cs231n 课程笔记

    http://blog.csdn.net/dinosoft/article/details/51813615 前言 对于深度学习,新手我推荐先看UFLDL,不做assignment的话,一两个晚上就可 ...

  7. left menu

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. UVA10312- Expression Bracketing(Catalan + 递推)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=1253">题目链接 题意:给出一个序列,长 ...

  9. python ——单下划线(约定)

    命名规则: 通常使用小写单词,必要时用下划线分隔增加可读性. 使用一个前导下划线仅用于不打算作为类的公共接口的内部方法和实例变量. Python不强制要求这样; 它取决于程序员是否遵守这个约定. 使用 ...

  10. HBase数据同步到ElasticSearch的方案

    ElasticSearch的River机制 ElasticSearch自身提供了一个River机制,用于同步数据. 这里能够找到官方眼下推荐的River: http://www.elasticsear ...