语法

box-shadow:X轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

参数介绍:

注:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

  阴影模糊半径,其值只能为正值,值越大阴影边缘就越模糊,值为0时阴影不具有模糊效果。

  阴影扩展半径,其值可以为正负值,值为正,阴影扩大,值为负,阴影缩小


用法

外阴影: box-shadow: 0px 0px 12px 5px #33CC00;

内阴影:box-shadow:0px 0px 12px 5px #33CC00 inset ;

当外阴影设置了偏移量:box-shadow:5px 4px 6px  #666;

当内阴影设置了偏移量:box-shadow:5px 5px 5px #666 inset;

只设置X,Y偏移量:box-shadow:10px 10px  #666;

在上个基础上加阴影模糊半径和阴影扩展半径:box-shadow:10px 10px 5px 10px #666;

多个阴影: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

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

  1. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  2. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  3. CSS3阴影 box-shadow的使用

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...

  4. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  5. OpenGL阴影,Shadow Volumes(附源程序,使用 VCGlib )

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

  6. OpenGL阴影,Shadow Mapping(附源程序)

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

  7. OpenGL 阴影之Shadow Mapping和Shadow Volumes

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

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

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

  9. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

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

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

随机推荐

  1. IIS Express 无法启动

    IIS Express 无法启动1. \.vs\config\applicationhost.config2. 打开.csproject 中把 <UseIIS> 改成 False ---- ...

  2. PCB的版本控制

    http://club.szlcsc.com/article/details_1783_1.html 转载自:http://www.amobbs.com/thread-5606014-1-1.html ...

  3. H903

    Metadata-Version: 2.0Name: hackingVersion: 0.10.2Summary: OpenStack Hacking Guideline EnforcementHom ...

  4. Qmake 配置自定义编译过程

    Qmake 配置自定义编译过程 需求:动态更换资源文件 在 Windows10 下编写 Qt 项目时,有这样的需求: 程序用到的资源文件可以动态更换而不需要重新编译整个项目 解决方案 0.1 将所有的 ...

  5. Golang笔记(二)面向对象的设计

    Golang笔记(二)面向对象的设计 Golang本质还是面向过程的语言,但它实现了一些OOP的特性,包括抽象.封装.继承和多态. 抽象和封装 Golang和C语言一样以struct为数据结构核心,不 ...

  6. IOS如何打越狱包xcode无证书打包ios应用

    本文要介绍的是在无证书的情况下如何将自己应用打包出去在越狱设备上使用或发给第三方使用企业签名进行应用分发. 前提条件:拥有appleId账号,并且该账号已经注册开发者中心(无需花钱) 教程开始: 1. ...

  7. .NET 后台动态添加GridView列

    BoundField bfColumn1 = new BoundField(); bfColumn1.DataField = "zbcompanyname"; bfColumn1. ...

  8. mybatis问题记录

    问题:2019年3月29日 23:46:24 org.apache.ibatis.builder.IncompleteElementException: Could not find result m ...

  9. JSON FILE NOT FOUND?

    (WIN7+IIS7) 搞一个小测试,一个小程序,用一个JSON文件来显示数据, 用HTML 访问是完全没有问题的,可是一放到IIS下,就出现无法访问, CONSOLE:提示  NOT FOUND 原 ...

  10. springboot 修改和设置 banner

    springboot 修改和设置 banner 先上图 修改步骤 1.在src/main/resources下新建一个banner.txt文档 2.通过http://patorjk.com/softw ...