CSS学习系列3--CSS3中的box-shadow的使用
在CSS中,text-shadow是给文本添加阴影效果.
box-shadow则是给元素块添加周边阴影效果。 box-shadow基本的语法形式如下
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color
box-shadow: [投影方式] [X轴偏移量] [Y轴偏移量] [阴影模糊半径] [阴影扩展半径] [阴影颜色]
[投影方式]: 可选参数. 如果不设值,默认投影方式是外部阴影. 如果取值"inset" (它的唯一值),它投影为内阴影.
[X轴偏移量 X-offset]: 阴影水平偏移量,其值可以是正负值. 如果值为正值,则阴影在对象的右边, 如果值为负值,阴影在对象的左边
[Y轴偏移量 Y-offset]:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
CSS学习系列3--CSS3中的box-shadow的使用的更多相关文章
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- CSS学习系列2 -- CSS中的清除浮动
CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- JavaScript学习系列5 ---ES6中的var, let 和const
我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- java学习系列(一)Java中的IO操作
Java的IO流是实现输入/输出的基础,它可以方便地实现数据的输入\输出操作,在Java中把不同的输入\输出源抽象为"流",通过流的方式允许Java程序使用相同的方式来访问不同的输 ...
- gradle学习系列之eclipse中简单构建android项目
看不到图片能够去訪问这个网址看看:http://pan.baidu.com/s/1o6FrFkA 一.什么是Gradle 官网www.gradle.org上介绍Gradle是升级版(evolved)的 ...
- JavaScript学习系列8 - JavaScript中的关系运算符
JavaScript中有8个关系运算符,分别是 ===, !===, ==, !=, <, <=, >, >= 1. 恒等运算符 (===) ===也叫做 严格相等运算符,它要 ...
- JavaScript学习系列7 -- JavaScript中的运算符
今天,我们来说一说JavaScript中的运算符,首先我们来讲一讲 一元运算符 JavaScript中的一元运算符有以下几种 1. delete delete 运算符主要用于删除对以前定义的对象属性或 ...
随机推荐
- Keep DNS Nameserver Order Consistency In Neutron
一个subnet有多个dns server时,dns server在创建时就定好了,但可以update: neutron subnet-update 1a2d261b-b233-3ab9-902e-8 ...
- 创建 CSS3 下拉菜单
1. [图片] 菜单效果 2. [代码]menu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- linux命令学习笔记(3):pwd命令
Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时, 你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置 ...
- Nginx-rtmp模块实现流媒体play、push、pull功能
官方wiki:https://github.com/arut/nginx-rtmp-module#readme Nginx rtmp 功能特点 1. 支持音视频直播 2. 支持flv/mp4视 ...
- POJ3294Life Forms(广义后缀自动机)(后缀数组+二分+数状数组)
You may have wondered why most extraterrestrial life forms resemble humans, differing by superficial ...
- wcf win7上使用net.tcp出现不支持协议问题解决
第一:iis绑定 net.tcp 808:* 第二:iis 应用中高级开启协议,添加net.tcp多协议逗号隔开 第三:开启各项服务 第四:执行 ServiceModReg.exe -r
- C#实现读写文本文件中的数据
[1]首先我们定义一段假数据,这里以一个string为例字 static void Main(string[] args) { string data = &quo ...
- [Codeforces 1139D] Steps to One
[题目链接] https://codeforces.com/contest/1139/problem/D [算法] 考虑dp 设fi表示现在gcd为i , 期望多少次gcd变为1 显然 , fi = ...
- BZOJ3545:[ONTAK2010]Peaks
浅谈线段树合并:https://www.cnblogs.com/AKMer/p/10251001.html 题目传送门:https://lydsy.com/JudgeOnline/problem.ph ...
- NET Remoting 最简单示例
NET Remoting 最简单示例 2014-01-21 15:29 10492人阅读 评论(4) 收藏 举报 分类: .NET(6) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习 ...