语法：

box-shadow：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

默认值：none

适用于：所有元素

继承性：无

动画性：是，除了内、外阴影切换时

计算值：指定值

取值：

none：无阴影
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
 

说明：

设置或检索对象阴影。参阅 <' text-shadow '> 属性

  • 可以设定多组效果，每组参数值以逗号分隔。
  • 对应的脚本特性为boxShadow。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>box-shadow 阴影</title>

    <style type="text/css">

    .sample{

        width: 200px;

        height: 300px;

        background-color: #f1f1f1;

        box-shadow: 50px 0px 0px 50px blue;

        margin: 200px;

    }

    </style>

</head>

<body>

<div class="sample"></div>

</body>

</html>

阴影大小是在 水平偏移后 给 200px * 300px的 原DIV 增加的阴影边框。

不信?  你就把  水平偏移 设置为 0px 看看。

.sample{

    width: 200px;

    height: 300px;

    background-color: #f1f1f1;

    box-shadow: 0px 0px 0px 50px blue;

    margin: 200px;

}

阴影 box-shadow的更多相关文章

  1. OpenGL阴影，Shadow Volumes（附源程序，使用 VCGlib ）

    实验平台:Win7,VS2010 先上结果截图:    本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...

  2. OpenGL阴影，Shadow Mapping（附源程序）

    实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...

  3. OpenGL 阴影之Shadow Mapping和Shadow Volumes

    先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...

  4. 阴影锥(shadow volume)原理与展望

    转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...

  5. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  6. （转）阴影锥(Shadow Volume)

    转自:http://blog.csdn.net/zjull/article/details/11819923 Shadow Map和Shadow Volume是当今比较流行的实时阴影渲染方法,跟Sha ...

  7. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  8. [UWP]使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow)

    1. 什么是长阴影 前几年扁平化设计(Flat Design)十分流行,后来在扁平化的基础上又流行起了长阴影(Long Shadow).长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常 ...

  9. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  10. 转:体积阴影(Shadow Volumes)生成算法

    下面以最快的速度简单谈谈阴影生成技术,目前普遍采用的一般有三种:Planar Shadow.Shadow Mapping和Shadow Volume,前者类似投影,计算最简单,缺点只能绘制抛射在平面上 ...

随机推荐

  1. 编译器出现conflicting types for 某某的错误原因总结

    直译就是xxxx 发生了一种冲突!比如今天发现的这个错误,实属低级! 本次错误的原因是:函数没有先声明,便写在了主函数后面!应该是先声明,后定义,如果只有定义,则定义必须写在主函数上方.通过查资料,有 ...

  2. (二十一)WebGIS中鹰眼的实现思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现 ...

  3. 仿优酷Android客户端图片左右滑动（自动滑动）

    最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  4. Android APP压力测试(三)之Monkey日志自动分析脚本

    Android APP压力测试(三) 之Monkey日志自动分析脚本 前言 上次说要分享Monkey日志的分析脚本,这次贴出来分享一下,废话不多说,请看正文. [目录] 1.Monkey日志分析脚本 ...

  5. 一步一步开发Game服务器（二）完成登陆，聊天

    我知道这样的文章在博客园已经多的大家都不想看了,但是这是我的系列文章开始,请各位大神见谅了. 多线程,线程执行器,(详见),socket通信相关 (详见) 本人blog相关文章测试代码,示例,完整版s ...

  6. Struts2 源码分析——调结者(Dispatcher)之执行action

    章节简言 上一章笔者写关于Dispatcher类如何处理接受来的request请求.当然读者们也知道他并非正真的执行action操作.他只是在执行action操作之前的准备工作.那么谁才是正真的执行a ...

  7. do{...}while(0)的妙用

    在学习第一门编程语言时,就已经介绍了顺序分支.条件分支.循环分支.比如循环分支有for.while.do-while语句.在随后的学校及工作中,如果手工循环一般使用for.while,很少使用do-w ...

  8. SQL Server 存储过程遇到“表 '#TT' 没有标识属性。无法执行 SET 操作”错误

    创建临时表,往临时表插入数据的时候报的错误. 一开始提示没有打开主键,后来打开主键就提示上述错误异常. 从网上查找资料没有找到,然后又到群里问各位大牛,一位大牛告诉我是没有设置主键. 我又仔细看看提示 ...

  9. Asp.Net 上传图片并生成高清晰缩略图

    在asp.net中,上传图片功能或者是常用的,生成缩略图也是常用的.baidu或者google,c#的方法也是很多的,但是一用却发现缩略图不清晰啊,缩略图片太大之类的事情,下面是我在处理图片上的代码, ...

  10. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...