How do I set this shadow effect in an image around a div element?

Here's an image of what I want:

<a href="https://i.stack.imgur.com/wRSLl.png"><img src="https://i.stack.imgur.com/wRSLl.png"></a>

I want to have a similar light gray shadow effect around an element;
I tried setting CSS properties related to the border, but it didn't work out.

My idea is to use the gradient effect of css, but I am not particularly familiar with the gradient of css.

You can use the box-shadow CSS property:

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.05);

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body { padding: 1em; }

.my-btn {
  background: #FFF;
  padding: 0.25em 1em;
  border: none;
  border-radius: 1.5em;
  box-shadow: 0 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
  font-size: 2em;
}

.my-btn:hover {
  cursor: pointer;
  box-shadow: 0 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.15);
}

.my-btn:active {
  background: #222;
  color: #EEE;
  box-shadow: 0 0.25rem 1rem 0.25rem rgba(0, 0, 0, 0.5);
}

<!-- language: lang-html -->

<button class="my-btn">待评价</button>

<!-- end snippet -->

Try this:
Css:

.btn {
width:200px;
height:150px;
border:none;
outline:none;
box-shadow:2px 2px 12px 2px #efefef;
border-radius:8px;
}

Html:

<div class="btn">Hello</div>