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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。