資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何僅在左右兩側設定陰影？
在本文中，我們將學習如何使用 CSS 建立一個僅在元素左右兩側顯示的陰影效果。陰影效果常用於為網頁元素新增深度和維度，但預設情況下，陰影會應用於所有四個側面。在這裡，我們將探索一些簡單的方法來實現僅在側面顯示陰影。
什麼是 CSS 中的陰影？
CSS 中的box-shadow 屬性 用於在元素周圍新增陰影效果。透過調整偏移量、模糊度和擴充套件等值，可以控制陰影的大小、方向和強度。
陰影的關鍵元素
- 水平偏移量：控制陰影在水平方向上的位置。
- 垂直偏移量：控制陰影在垂直方向上的位置。
- 模糊半徑：使陰影變得更柔和或更銳利。
- 擴充套件半徑：增加或減少陰影的大小。
逐步新增僅限側面的陰影
- 步驟 1 - 基本 HTML 結構：讓我們從一個簡單的 HTML 結構開始，應用陰影效果。
- 步驟 2 - 使用 CSS 新增樣式：現在，讓我們新增 CSS 樣式，僅在左右兩側應用陰影。
HTML 程式碼
建立一個結構，我們在其中將在左右兩側應用陰影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Side-Only Box Shadow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Side-Only Box Shadow</div>
</body>
</html>
CSS 程式碼
關鍵 CSS 屬性的解釋
- 水平偏移量：我們為左側陰影設定 -5px，為右側陰影設定 5px。這使得陰影僅位於側面。
- 模糊半徑：將其設定為 10px 會為陰影新增柔和的效果。
- 顏色：RGBA 顏色 rgba(0, 0, 0, 0.2) 使陰影略微透明。
自定義僅限側面的陰影效果
您可以透過調整這些值來自定義僅限側面的陰影。
box-shadow: -8px 0 12px rgba(0, 0, 0, 0.3), /* Left shadow */ 8px 0 12px rgba(0, 0, 0, 0.3); /* Right shadow */
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the Box */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
/* Box Styling */
.box {
width: 300px;
height: 200px;
padding: 20px;
background: green;
text-align: center;
box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
/* Right shadow */
font-size: 1.2em;
}
在左右兩側設定陰影的完整程式碼
以下是建立僅在左右兩側具有陰影的盒子的完整程式碼。
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-Only Box Shadow</title>
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the Box */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
/* Box Styling */
.box {
width: 300px;
height: 200px;
padding: 20px;
background: green;
text-align: center;
box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
/* Right shadow */
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="box">Side-Only Box Shadow</div>
</body>
</html>
輸出
在本文中，我們學習瞭如何使用 CSS 建立一個僅在元素左右兩側顯示的陰影效果。
更新於： 2024 年 11 月 8 日
26 次瀏覽
廣告