第1个值水平偏移值

第2个值垂直偏移值

第3个值设置对象的阴影模糊值

第4个值设置对象的阴影外延值

  • 外阴影常规效果
    box-shadow:5px 5px rgba(0,0,0,.6);
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);
  • 外阴影模糊外延效果
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
  • 内阴影效果
    box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);

css3 box-shadow 用法的更多相关文章

  1. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  2. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  3. css3 calc()的用法

    转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...

  4. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  5. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  6. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  7. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  8. CSS3的基础用法

    CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...

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

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

  10. CSS3 @font-face详细用法（转）

      @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了! ...

随机推荐

  1. Arduino Wire.h（IIC）库函数详解

    此库中包含 1 Wire.begin() 2 Wire.requestFrom() 3 Wire.beginTransmission() 4 Wire.endTransmission() 5 Wire ...

  2. 高性能MySQL笔记-第5章Indexing for High Performance-001B-Tree indexes(B+Tree)

    一. 1.什么是B-Tree indexes? The general idea of a B-Tree is that all the values are stored in order, and ...

  3. SPOJ GSS7 - Can you answer these queries VII

    板的不能再板,链剖+线段树或者是LCT随便维护. 感觉唯一要注意的是跳链的时候要对$x$向上跳和$y$向上跳的情况分开讨论,而不能直接$swap$,因为只有两段接触的端点才能相互合并,而且每一次向上跳 ...

  4. patch请求--501错误

    通过命令 tail -f /var/log/wildfly/wrapper.log -n 1000 查看控制台: 并没有报红. 未显示具体哪行代码有错误. debug运行patch请求,根本没有进入p ...

  5. JavaScript-ES6中的class及继承

    我们知道,ES6中,引入了class这个关键字,让在JavaScript中定义类更加简单了 在介绍ES6中的class之前,我们先来看一下JavaScript之前类的实现,在此之前,JavaScrip ...

  6. 模仿添加QQ好友桌面快捷方式

    /** * * @param context * @param tname 桌面快捷方式的名字 * @param icon 好友头像 */ public static void addShortCut ...

  7. java获取Excel的导出

    import java.io.*; import org.apache.commons.io.FileUtils; import org.apache.poi.hssf.usermodel.HSSFC ...

  8. postgre教程

    http://www.yiibai.com/html/postgresql/2013/080890.html

  9. 从一个xaml文件获取xaml内容，遍历寻找对象

  10. 基于ef core 2.0的数据库增删改审计系统

    1.首先是建审计存储表 CREATE TABLE [dbo].[Audit] ( [Id] [uniqueidentifier] NOT NULL, [EntityName] [nvarchar](1 ...