css box-shadow Box阴影效果
阅读数:87 评论数:0
跳转到新版页面分类
html/css/js
正文
一、定义
box-shadow用于实现BOX阴影效果,有6个可设值。
box-shadow: x方向偏移 y方向偏移 模糊半径 扩张半径 阴影颜色 阴影关键字
box-shadow: offset-x offset-y blur spread color position;
1、阴影水平方向上的偏移量,正值表示向右偏移,负值表示向左偏移。
2、阴影垂直方向上的偏移量,正值表示向下偏移,负值表示向上偏移。
3、阴影模糊的距离,值越大越模糊。
4、可选,正值表示在所有方向上扩展阴影,负值表示在所有方向上消减阴影。
5、阴影的颜色
box-shadow: 0px 0px 20px 10px #67b3dd
box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5)
6、阴影关键字,不设置时会外阴影,inset为内阴影。
二、示例
相关推荐
一、概述
overflow属性用于当一个元素太大而无法适应父级窗口的大小时行为。具体又可以分为:
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
over
一、概述
background是css简写属性,可有一个或多个值,且可以按任意顺序放置:
background:
<bg-color>
<bg-image>
<position/bg-size>
Less是一个CSS的超集,Less允许我们定义变量,使用嵌套式声明,定义函数等。严格说Less包含两部分:(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS,所以Less文件
一、概述
CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】