CSS的box-shadow属性

时间 2021-04-07

标签 html 网站 spa 翻译 code htm 教程图片事务 utf-8 栏目 CSS 繁體版

原文原文链接

1、前言

其实这个属性是很细碎的知识点，以前想要阴影效果就直接看看别人的网站，而后复制一下别的，效果也还行，再后来呢，本身一想用到这个属性就去菜鸟教程查一下，而后本身慢慢调这个阴影，可是那几个阴影属性的值总是没记住，因此今天仍是写一下吧！html

2、从新认识box-shadow

菜鸟教程这么记载的：网站

语法

box-shadow: h-shadow v-shadow blur spread color inset;
spa

box-shadow有六个属性值：
1.抛开最后一个最简单的，由于inset就是设置内部阴影，默认的阴影效果是out-set，并且out-set也是最经常使用的。
2.color也不用理解，就是显示阴影的颜色而已。翻译

因此真正须要理解的只有四个值：
3.h-shadow，即第一个属性值，他表示的阴影的垂直位置，能够为负值；而v-shadow即第二个属性值，表示的是阴影的水平位置，也能够为负值；code

一开始看这两个水平与垂直的阴影位置的描述实在是一头雾水，最后思考一下并实践证实，这个其实很简单，无非是平面坐标系，以左上角为原点，水平的阴影就是往原点右边即正，垂直阴影就是往原点正下方为正：
htm

菜鸟教程的案例借用一下：教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

核心代码：box-shadow: 10px 10px 5px #888888;图片

抛开最后的三个，如今只分析前两个，就是水平与处置的方向，能够看到阴影方向都是在正方向，这个是由于上面的box-shadow属性的前两个值都为正。事务

把它改成负值，就是这个样子：box-shadow: -10px -10px 5px #888888;

视觉上貌似负方向的阴影效果更强一点。utf-8

可是这样看，这个属性也太鸡肋了吧，由于只能够设置两条边，跟我平时看到的不同啊，例如思否的box-shadow：

貌似上下左右都有啊！

这个怎么弄呢？

其实很简单，无非就是上下左右一块儿弄咯：

box-shadow: 10px 10px 5px #888888，-10px -10px 5px #888888；

仍是拿菜鸟的例子改一改，并改下背景颜色：

这个效果好看多了有没有。

相似的还能够这样用：

box-shadow: 
         10px 0px 10px red,//往右 红
         0px -10px 10px blue,//往上 蓝
         0px  10px 10px yellow,//往下 黄
        -10px 0px brown;//往左 棕

顺带试试inset属性：

box-shadow: 
         10px 0px 10px red inset,
         0px -10px 10px blue inset,
         0px  10px 10px yellow inset,
         -10px 0px brown inset;

到这里就讲了box-shaodw的四个属性了，还剩下两个，这两个也是我最迷糊的：

（4）blur 可选。模糊距离；spread 可选。阴影的大小；
这两个有什么区别，模糊的距离，和阴影的大小。模糊距离不就是模糊的尺寸吗，它不就表明着模糊的大小吗？而阴影大小表示模糊尺寸，不也是大小吗？

仍是翻译为英语再理解一下，blur：模糊的意思，spread：传播的意思

继续拿菜鸟的例子：

div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px 0px #888888;
}

此时blur：5px，spread：0px；
效果图：

把spread增长到100px试试：box-shadow: 10px 10px 5px 100px #888888;

能够看到模糊的范围变大了，也体现了它传播的意思，此时把blur改成100px试试：
box-shadow: 10px 10px 100px 100px #888888;
发现效果变模糊了：

因此blur主要用于模糊做用，spread用于阴影的大小，菜鸟教程的解释，有时仍是不如本身的实践理解，由于每一个人理解同一件事务的思惟多是不同的。

好了，记录到这里吧，好困，写于2021-4-6 23:18。