css3 - css怎么做出這樣的效果？

問題描述

中間的那個比周圍亮的區域怎么做啊？

問題解答

.mask { position: fixed; z-index: 10000; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 300px; height: 100px; outline: 1000px solid rgba(0, 0, 0, 0.5);}<p class='mask'></p>回答2：

用背景色做成的demo 如下

https://codepen.io/jackpan/pe...

用box-shadow 或者 outline做成的demo如下：https://codepen.io/jackpan/pe...

正確的方法是使用 box-shadow，如： box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)

我覺得有2種做法：1、用4個 p 做出它四周比較暗的區域。2、背景圖上遮罩1個p做出比較暗的地方，然后最頂上一個p里放進同一張背景圖，定位到合適的位置。

filter: brightness(1.3);或者backgournd-color: rgba(0, 0, 0, 0.5);

這兩種方式都可以

<p>//絕對定位 <p>//背景圖 </p> <p>//相對定位 遮罩層 </p> <p>//相對定位 橫向光亮盒子 </p> <p>//相對定位 縱向盒子 </p></p>回答7：

設計師能解決的盡量不要用css來寫

醬紫的，用absolute和z-index][1]