Question 259288 in Html Question posted in
Some basic documentation can be found here.

Html – Doubts about box shadow (Am I doing it right?)

That’s all what I could do (https://phpout.com/wp-content/uploads/2023/10/5DntW.png)

My teacher wants me to create this kind of shadow, but I didn’t find any solution to create something like this, I do not know if she is crazy and It’s not possible, but It isn’t possible with just the element "box-shadow" (https://phpout.com/wp-content/uploads/2023/10/cqOfz.png)

Tags:

2

Answers


  1. 0

    I’d say, create a pseudo element ::after on that red bordered box, then give it also a box-shadow with a blur, a transparent background, and either position it absolute to the red box or give it a margin-top and margin-left.

    Not giving you a finished example here, since your teacher wants you to learn 😉

    Login or Signup to reply.
  2. 0

    I personally like to use an online box shadow creator. There are many out there, like this one: https://www.cssmatic.com/box-shadow

    Here is a sample using that box shadow generator.

    #box{
  padding:20px;
  border:2px solid red;
  border-radius:40px;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
    <div id="box">test</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search