Css Secrets - one-Sided shadows

2016-03-31 本文已影响146人 Scaukk

阴影大家或多或少都用过，用的好的可以到什么程度呢，来看下：

亮瞎眼的box-shadow

这个网址打开比较慢，我把它拿了下来，看这里

Paste_Image.png

汗颜＝＝，看来我们要重新认识一下这个属性了。

基础回顾

box-shadow 以逗号分隔列表来描述一个或多个阴影效果，基弧可以用到任何元素上。
如果元素同时设置了border-radius ,阴影也会有阴影效果。

多个阴影的z-ordering 和多个text-shadow 的z-ordering 规则相同，即第一个阴影在上面。

语法

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color *
/box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

取值

inset
默认阴影在边框外。使用inset后，
阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> ,<offset-y>

这是头两个 <length>
值，用来设置阴影偏移量。<offset-x>
设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y>
设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length> .
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius>
或<spread-radius>
则有模糊效果。

<blur-radius>

这是第三个 <length>
值。值越大，糊糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。

<spread-radius>

这是第四个 <length>
值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。

<color>

相关事项查看 <color>
。如果没有指定，则由浏览器决定——通常是color
的值，不过目前Safari取透明。

正规语法

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

正文

我们或多或少都用过阴影，不论用的怎么样，好看或是不好看。
关于怎么用的好，我了解的也不多，不多说。
这里主要说的是单边和双边阴影。

很多人都是用三个值一个颜色来定义阴影，像这样：

<pre>
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
</pre>

从这一段代码里我们能得到如下信息：

一个和本体同样大小的，黑色半透明的矩形被画了出来.
它向右平平移了2px,向下平移了3px.
它的模糊半径是4px ,(用的是高斯模糊算法或者相似的算法)，这意味着从定义的颜色到完全透明，大概有8px的距离.（double the blur radius）
具有发散半径的矩形和他它的本体交叉的部分被裁减掉了，所以看起来是刚好在下面。不过要注意的是，本体下方是没有任何阴影的。

<pre>
div {
width: 1.6in;
height: 1in;
background: transparent;
box-shadow: 2px 3px 4px black;
}
</pre>