1、box-shadow 语法

box-shadow: none ;box-shadow: inset  x-offset  y-offset  blur-radius  spread-radius  color;

2、box-shadow 属性值描述

  1. 阴影类型:此参数可选,默认的投影方式是 外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影

  2. X-offset:是指 阴影水平偏移量 ,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边

  3. Y-offset:是指 阴影的垂直偏移量 ,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部

  4. 阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊

  5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

  6. 阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数

    **注:**多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。

3、box-shadow的实际运用

3.1、举例 1

不设置X轴与Y轴,设置值阴影模糊半径为15px, 它会在本身发生作用 半径范围,颜色

box-shadow: 0 0 15px #f00;

3.2、举例 2

X轴与Y轴设为正值(正值 X轴向右 Y轴向下)

box-shadow:4px 4px 15px #f00;

3.3、举例 3

box-shadow:inset 即box-shadow内部阴影,与上面写法相同 唯一不同的是添加了一个inset

box-shadow:0 0 15px #f00 inset;

3.4、举例 4

设置正方形的四边颜色都不一样,但是阴影模糊半径都为10px

box-shadow:-10px 0px 10px red,   /*左边阴影*/0px -10px 10px black,  /*上边阴影*/10px 0px 10px green,  /*右边阴影*/0px 10px 10px blue;" /*下边阴影*/ >

box-shadow 属性 详解相关推荐

  1. jquery方法属性详解

    jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法 各种选择器的 ...

  2. 弹性盒子(flexbox)布局属性详解

    弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...

  3. python中文读音ndarray-numpy中的ndarray方法和属性详解

    NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...

  4. spring MVC请求处理类注解属性详解

    spring MVC请求处理类注解属性详解

  5. Meta http-equiv属性详解

    Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎  http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...

  6. JavaScript Function.arguments 属性详解

    转载自   JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...

  7. vertical-align属性详解

    vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...

  8. border-sizing属性详解和应用

    box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...

  9. /etc/shadow 文件详解

    /etc/shadow 文件详解 用户帐户本身在 /etc/passwd 中定义.Linux 系统包含一个 /etc/passwd 的同伴文件,叫做 /etc/shadow.该文件不像 /etc/pa ...

  10. Flash播放控件属性详解

    Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写)  语法:AlignMode As Long  说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

最新文章

  1. java class类结构
  2. Tyznn人脸识别温度检测智能门禁系统现货发售,助力疫情防控
  3. Java-String的常用方法总结!
  4. 怎样让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用
  5. 前端学习(2877):原生js模块化+绘制弹幕与动画video联动
  6. SpringBoot2 集成 skywalking 实现链路追踪
  7. [开发笔记]-C#获取pdf文档的页数
  8. 关于字符串截取的函数
  9. 【二分】Producing Snow @Codeforces Round #470 Div.2 C
  10. nodejs中的模块的理解
  11. 黄金分割法与单峰函数求极值
  12. Spring AOP 浅析
  13. mysql 语法手册_MySQL语法大全_自己整理的学习笔记
  14. 【windows10】对系统盘瘦身
  15. anisotropy texture filtering
  16. linux静态路由表无故消失,探究几种静态路由的行为及自动删除行为
  17. python中图形绘制技术的应用_python数据图形化—— matplotlib 基础应用
  18. python-画3D图
  19. oracle查询视图时慢,oracle视图查询速度慢
  20. 布隆(Bloom Filter)过滤器入门

热门文章

  1. 使用PE启动U盘安装pfSense
  2. dnf加物理攻击的卡片有哪些_dnf加物理攻击力的宝珠有哪些 dnf物攻宝珠
  3. Python 中拼音库 PyPinyin 的用法
  4. CANoe 11.xx 快速入门教学
  5. 网页中滚动字幕的制作
  6. 硬件开发设计 - 焊接电路板,介绍焊接概念,焊接步骤,常见错误,难点等
  7. 如何加盟游戏代理充值
  8. SQL 创建数据库和表
  9. 农行上海研发中心面经
  10. KSZ8081RNB-PHY芯片调试记录