css3 - How to create such effect in css?

Question

How to make the area in the middle that is brighter than the surrounding areas?

Answer 1

.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>

Answer 2

The demo made with background color is as follows

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

The demo made with box-shadow or outline is as follows:
https://codepen.io/jackpan/pe...

Answer 3

The correct way is to use box-shadow, such as: box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)

Answer 4

I think there are two methods:
1. Use 4 p’s to create a darker area around it.
2. Mask 1 p on the background image to make a darker place, then put the same background image into the top p and position it at the appropriate position.

Answer 5

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

Both methods are available

Answer 6

<p>//绝对定位
    <p>//背景图
    </p>
    <p>//相对定位 遮罩层
    </p>
    <p>//相对定位 横向光亮盒子
    </p>
    <p>//相对定位 纵向盒子
    </p>
</p>

Answer 7

As much as designers can solve the problem, try not to use css to write it

Answer 8

Purple, use absolute and z-index
][1]