乐趣区

关于css:CSS的boxshadow属性

一、前言

其实这个属性是很细碎的知识点,之前想要暗影成果就间接看看他人的网站,而后复制一下别的,成果也还行,再起初呢,本人一想用到这个属性就去菜鸟教程查一下,而后本人缓缓调这个暗影,然而那几个暗影属性的值老是没记住,所以明天还是写一下吧!

二、重新认识 box-shadow

菜鸟教程这么记录的:

语法

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

box-shadow 有六个属性值:
1. 抛开最初一个最简略的,因为 inset 就是设置外部暗影,默认的暗影成果是 out-set,而且 out-set 也是最罕用的。
2.color 也不必了解,就是显示暗影的色彩而已。

所以真正须要了解的只有四个值:
3.h-shadow,即第一个属性值,他示意的暗影的垂直地位,能够为负值;而 v -shadow 即第二个属性值,示意的是暗影的程度地位,也能够为负值;

一开始看这两个程度与垂直的暗影地位的形容切实是一头雾水,最初思考一下并实践证明,这个其实很简略,无非是立体坐标系,以左上角为原点,程度的暗影就是往原点左边即正,垂直暗影就是往原点正下方为正:

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

<!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;

视觉上貌似负方向的暗影成果更强一点。

然而这样看,这个属性也太鸡肋了吧,因为只能够设置两条边,跟我平时看到的不一样啊,例如思否的 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。

退出移动版