CSS3 --添加阴影(盒子阴影、文本阴影的使用)
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 --添加阴影(盒子阴影、文本阴影的使用)的更多相关文章
- 【Web】CSS实现抖音风格字体效果(设置文本阴影)
简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...
- CSS3文本阴影、边框阴影
CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow 使用text-shadow,可以 ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3 一、文本阴影text-shadow属性
文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 <!DOCTYPE html> <html lang="en"> ...
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- 文本溢出text-overflow和文本阴影text-shadow
前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- CSS3(1)---圆角边框、边框阴影
CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...
随机推荐
- FIREDAC记录SQL日志
FIREDAC记录SQL日志 跟踪SQL日志可以方便开发的时候的程序调试.SQL日志记录会耗费服务费资源,正式部署中间件的时候,建议关闭SQL日志记录. FIREDAC通过使用TFDMoniFlatF ...
- python模块打包方法
http://www.jb51.net/article/92789.htm 一 首先将模块的目录结构整理如下: VASPy/ ├── LICENSE ├── MANIFEST ├── MANIFEST ...
- 一个基于RSA算法的Java数字签名例子
原文地址:一个基于RSA算法的Java数字签名例子 一.前言: 网络数据安全包括数据的本身的安全性.数据的完整性(防止篡改).数据来源的不可否认性等要素.对数据采用加密算法加密可以保证数据本身的安全性 ...
- swftools使用
为了支持gif转swf以及pdf转swf.编译swftools过程中遇见几个问题,记录一下. 首先下载swftools:http://www.swftools.org/ 它依赖几个包,这里我使用的版本 ...
- 编译安装Nginx和php搭建KodExplorer网盘
编译安装Nginx和php搭建KodExplorer网盘 环境说明: 系统版本 CentOS 6.9 x86_64 软件版本 nginx-1.12.2 php ...
- Nginx探索三
这次探索一下http 请求 request 这节我们讲request,在nginx中我们指的是http请求,详细到nginx中的数据结构是ngx_http_request_t. ngx_http_re ...
- python——iterator迭代器|iterator详解——20140918|
-----------------------------------------------------------------------------前言--------------------- ...
- Linux上安装tomcat、jdk
一.tomcat [上传 yum -y install lrzsz] 1.tar zxvf apache-tomcat-7.0.57.tar.gz 2. mv apache-tomcat-7.0.57 ...
- MySQL5.5中文支持
1. /etc/my.cnf.d/client.cnf [client] #password = [your_password] port = 3306 socket = /tmp/mysql.soc ...
- elasticsearch 单节点实现
一.安装java环境,这么不说了,一般用源码安装,配置好环境变量 二.新建es用户和组,es不能用root启动 三.下载需要的稳定版es 四.解压安装es .zip /opt/app/ es / 五. ...