如何使用阴影创建实心边框？

Question

I am trying to add a border using box-shadow inset , because of the condition i am not able to use the border-box on one of the a element. But not getting. any help?

 .parent{ background: #FFF; padding:5rem; box-shadow: inset 1px 1px 0px 2px rgba(0,0,0,1); }

 <div class="parent"></div>

Answer 1

If you want equal border-width on all sides - just remove offset-x and offset-y :

 .parent{ background: #c9c9c9; padding:5rem; box-shadow: inset 0 0 0 2px rgba(0,0,0,1); }

 <div class="parent"></div>

Answer 2

Change the horizontal and vertical offset (value) of the shadow to 0px such as:

   box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);

 .parent{ background: #FFF; padding:5rem; box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1); }

 <div class="parent"></div>

Answer 3

In case you cannot use the border property here is different techniques that allow you to create a border for your element:

Using outline

 .parent{ background: #FFF; padding:5rem; outline:2px solid rgba(0,0,0,1); }

 <div class="parent"></div>

Using Box-shadow

 .parent{ background: #FFF; padding:5rem; margin:5px; box-shadow:0 0 0 2px rgba(0,0,0,1); } .parent.inset { box-shadow:inset 0 0 0 2px rgba(0,0,0,1); }

 <div class="parent"></div> <div class="parent inset"></div>

Using gradient

 .parent{ background: #FFF; padding:5rem; margin:5px; background: linear-gradient(#000,#000) top/100% 2px, linear-gradient(#000,#000) bottom/100% 2px, linear-gradient(#000,#000) left/2px 100%, linear-gradient(#000,#000) right/2px 100%; background-repeat:no-repeat; }

 <div class="parent"></div>

Another way with gradient if you want to have a background-color :

 .parent{ background: #FFF; padding:5rem; margin:5px; background: linear-gradient(pink,pink) center/calc(100% - 4px) calc(100% - 4px), linear-gradient(#000,#000); background-repeat:no-repeat; }

 <div class="parent"></div>