CSS中的box-shadow詳解

發(fā)布時間：2024-10-21 15:37:44 作者：V。on

本文解析了CSS屬性box-shadow的用法和應用,屬性可以設置一個或多個下拉陰影的框,通過box-shadow屬性,可以定義水平陰影的位置、垂直陰影的位置、模糊距離、陰影的大小和顏色以及陰影的投影方式,通過實例展示了如何通過box-shadow實現(xiàn)按鈕的按壓效果、立體效果等視覺效果

box-shadow詳解

屬性定義及使用說明

box-shadow屬性可以設置一個或多個下拉陰影的框。

語法

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

注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規(guī)定。省略長度的值是 0。

屬性	描述
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。
inset	可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

屬性詳解

div默認設置以下css樣式：

.container {
	width: 200px;
	height: 200px;
	background-color: red;
}

h-shadow
它是必需的，代表水平方向的陰影。值為正數(shù)時，陰影在元素的右側(cè)；值為負數(shù)時，陰影在元素的左側(cè)。

<div class="container container1"></div>
<div class="container container2"></div>

.container1 {
    box-shadow: 20px 20px;
}
.container2 {
    box-shadow: -20px 20px;
}

效果如下：

v-shadow
它是必需的，代表垂直方向的陰影。值為正數(shù)時，陰影在元素的下側(cè)；值為負數(shù)時，陰影在元素的上側(cè)。

.container1 {
    box-shadow: 20px 20px;
}
.container2 {
    box-shadow: 20px -20px;
}

blur
它是可選的，代表陰影的模糊半徑。值越大，越模糊。

.container1 {
    box-shadow: 20px 20px 20px;
}
.container2 {
    box-shadow: 20px 20px 40px;
}

spread
它是可選的，代表陰影的大?。〝U散半徑）。值為正數(shù)時，陰影在原來的基礎上放大；值為負數(shù)時，陰影在原來的基礎上縮小。

.container1 {
    box-shadow: 20px 20px 0;
}
.container2 {
    box-shadow: 20px 20px 0 -10px;
}
.container3 {
    box-shadow: 20px 20px 0 10px;
}

color
它是可選的，代表陰影的顏色。不設置顏色時默認黑色。

.container1 {
    box-shadow: 20px 20px 0 0;
}
.container2 {
    box-shadow: 20px 20px 0 0 yellow;
}

inset
它是可選的，代表陰影的投影方式。如果設置了則從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影。

.container1 {
	box-shadow: 20px 20px;
}
.container2 {
	box-shadow: 20px 20px inset;
}

幾個通過box-shadow實現(xiàn)的效果：

按鈕的按壓效果

核心代碼：

<button class="button">點我</button>

.button {
    display: inline-block;
    padding: 15px 35px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4caf50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}
.button:hover {
    background-color: #3e8e41;
}
.button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

按鈕的另一種按壓效果

核心代碼：

<button class="button">點我</button>

.button {
    width: 120px;
    height: 60px;
    background: #e9ecef;
    color: #333;
    border-radius: 12px;
    box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4),
      -7px -7px 12px rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 60px;
    border: none;
    font-size: 24px;
}
.button:active {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0.9),
      inset -7px -7px 12px rgba(255, 255, 255, 0.9),
      inset 7px 7px 12px rgba(0, 0, 0, 0.4);
}

“立體效果”

核心代碼：

<div class="container"></div>

.container {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
    margin: 200px auto;
}
.container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-4deg);
    transform-origin: center center;
    box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
    z-index: -1;
}

創(chuàng)建多個自身

核心代碼：

<div class="container"></div>

.container {
    width: 400px;
    height: 200px;
    background-color: gray;
    position: relative;
}
  .container::after {
    position: absolute;
    right: 35px;
    top: 10px;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 10px 0 0 #fff, 20px 0 0 #fff;
}

到此這篇關于CSS重的box-shadow詳解的文章就介紹到這了,更多相關css box-shadow內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！