box-shadow 属性 详解
1、box-shadow 语法
box-shadow: none ;box-shadow: inset x-offset y-offset blur-radius spread-radius color;
2、box-shadow 属性值描述
阴影类型:此参数可选,默认的投影方式是
外阴影
;如果取其唯一值“inset”,就是将外阴影变成内阴影X-offset:是指
阴影水平偏移量
,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边Y-offset:是指
阴影的垂直偏移量
,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊
阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小
阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在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 属性 详解相关推荐
- jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法 各种选择器的 ...
- 弹性盒子(flexbox)布局属性详解
弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...
- python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
- spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
- Meta http-equiv属性详解
Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
- JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
- vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
- border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...
- /etc/shadow 文件详解
/etc/shadow 文件详解 用户帐户本身在 /etc/passwd 中定义.Linux 系统包含一个 /etc/passwd 的同伴文件,叫做 /etc/shadow.该文件不像 /etc/pa ...
- Flash播放控件属性详解
Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
最新文章
- java class类结构
- Tyznn人脸识别温度检测智能门禁系统现货发售,助力疫情防控
- Java-String的常用方法总结!
- 怎样让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用
- 前端学习(2877):原生js模块化+绘制弹幕与动画video联动
- SpringBoot2 集成 skywalking 实现链路追踪
- [开发笔记]-C#获取pdf文档的页数
- 关于字符串截取的函数
- 【二分】Producing Snow @Codeforces Round #470 Div.2 C
- nodejs中的模块的理解
- 黄金分割法与单峰函数求极值
- Spring AOP 浅析
- mysql 语法手册_MySQL语法大全_自己整理的学习笔记
- 【windows10】对系统盘瘦身
- anisotropy texture filtering
- linux静态路由表无故消失,探究几种静态路由的行为及自动删除行为
- python中图形绘制技术的应用_python数据图形化—— matplotlib 基础应用
- python-画3D图
- oracle查询视图时慢,oracle视图查询速度慢
- 布隆(Bloom Filter)过滤器入门