您的位置：首頁技術文章
文章詳情頁

前端 - CSS3 box-shadow如何設置，或者用什么方法可以產生圖中這樣陰影的效果。

瀏覽：123日期：2023-07-03 13:25:20

問題描述

前端 - CSS3 box-shadow如何設置，或者用什么方法可以產生圖中這樣陰影的效果。

例如圖片中這樣的陰影如何實現， 因為p是長方形的，設置陰影就不是這個效果了，直接在圖片上設置也嘗試過，都不是圖中這樣的陰影，求有什么方法可以實現?

問題解答

回答1：

首先給出陰影的使用方法方便你根據例子調節各個參數box-shadow: h-shadow v-shadow blur spread color inset;h-shadow必需。水平陰影的位置。允許負值。v-shadow必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影的尺寸。color 可選。陰影的顏色。請參閱 CSS 顏色值。inset 可選。將外部陰影 (outset) 改為內部陰影。然后給一個我本地測試的demo

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title></head><body> <p class='box'></p></body><style> body { background-color: #d9edf7; } .box { width: 300px; height: 100px; margin: 100px; background-color: #666e86; transform: rotateZ(3deg); box-shadow: 0 5px 10px #888888; }</style></html>

這里 transform: rotateZ(3deg); 可以試著調節旋轉角度。然后 box-shadow 主要是調節第二和第三個參數，如果還是和預期的效果不符，你可以將十六進制的顏色改成rgba 的半透明色。即可達到效果望采納。

回答2：

transform + box-shadow

不行的話

可以嘗試 filter: drop-shadow()

標簽： CSS
相關文章：
国产综合久久一区二区三区