Question 209914 in CSS Question posted in
Some basic documentation can be found here.

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

Here’s an image of what I want:

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.

Tags:

2

Answers


  1. 0

    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);

    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);
}
    <button class="my-btn">待评价</button>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search