box-shadow属性
一、定义和用法
box-shadow属性 向框添加一个或多个阴影。
二、语法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow | 必需。水平阴影的位置。允许负值。 | |
v-shadow | 必需。垂直阴影的位置。允许负值。 | |
blur | 可选。模糊距离。 | |
spread | 可选。阴影的尺寸。 | |
color | 可选。阴影的颜色。 | |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
三、例子
1. box-shadow:2px 3px 4px #CCC;
/*<div style="box-shadow:2px 3px 4px #CCC;width:300px;height:25px;margin:50px;border:2px solid #9CF;">博客园</div>*/
一个带外阴影的元素,阴影位置x轴向右偏移2px,y轴向下偏移3px,模糊范围4px,阴影颜色#CCC
2. box-shadow:inset 0 -4px #CCC;
带内阴影的元素,阴影x轴不偏移,y向上偏移4px,颜色#CCC
3.区别
1)内部阴影与外部阴影
水平 数值正:向右偏移。外部阴影向右偏移,阴影在右;内部阴影向右偏移,阴影在左。
数值负:向左偏移。外部阴影向左偏移,阴影在左;内部阴影向左偏移,阴影在右。
垂直 数值正:向下偏移。外部阴影向下偏移,阴影在下;内部阴影向下偏移,阴影在上。
数值负:向上偏移。外部阴影向上偏移,阴影在上;内部阴影向上偏移,阴影在下。
2)阴影位置大小
3)模糊距离
“0”指没有模糊效果就是最清楚,值越大越模糊,达到一定值的时候就是一团雾
4)阴影尺寸
box-shadow属性的更多相关文章
- Layer的shadow属性
Layer的shadow属性 Layer中的阴影都是可以做动画处理的. - (void)viewDidLoad { [super viewDidLoad]; CALayer *layer = [CAL ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- Sublime Text自定制代码片段(Code Snippets)
在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为 ...
- 关于box-shadow属性的一点心得
一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
随机推荐
- hdu 2102 A计划_bfs搜索
题意:略 思路:此题陷阱超多,当##,#*,*#时不能走进去,套下模板就行了. #include <iostream> #include<cstdio> #include< ...
- OpenStack securityGroup rule Set
OpenStack DBaas 云数据即服务之☞troveError
- Win8开发疑问与解答
疑问:怎样获取开发者许可证 打开VS2012时,怎么在没有取得开发者许可证之前,屏蔽/跳过弹出的窗体“获取Windows8开发者许可证 你需要具有开发者许可证才能开发适用于......” 打开Blen ...
- css3实现图片遮罩效果鼠标hover以后出现文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- EC读书笔记系列之19:条款49、50、51、52
条款49 了解new-handler的行为 记住: ★set_new_handler允许客户指定一个函数,在内存分配无法获得满足时被调用 ★Nothrow new是一个颇为局限的工具,∵其只适用于内存 ...
- BZOJ 3648: 寝室管理( 点分治 + 树状数组 )
1棵树的话, 点分治+你喜欢的数据结构(树状数组/线段树/平衡树)就可以秒掉, O(N log^2 N). 假如是环套树, 先去掉环上1条边, 然后O(N log^2 N)处理树(同上); 然后再O( ...
- linux系统下memcached启动正常但程序无法连接的问题解决
在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPo ...
- javascript的调试
1. 关于javascript的调试,最好将浏览器的脚本通知打开. 2. 最好设置为每次访问页面时检查.
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
- Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...