box-shadow as text background-CodePudding

I have an element with inline background color made with box-shadox, like this:

.overlay {
  display: inline;
  background-color: red;
  box-shadow: 10px 0 0 red, -10px 0 0 red;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.overlay>span {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #fff;
}

body {
  padding: 20px;
  color: #fff;
  font-size: 20px;
}

<div >
  <span>Category</span>
</div>

However, since the text also needs a border and border radius, I added an inner span. As a consequence I need to add more box-shadow to top and bottom, but how?

I tried adding more layers to the box-shadow like this:

box-shadow: 10px 0 0 red, -10px 0 0 red, 0 10px 0 red, 0 -10px 0 red;

but it doesn't look good. How can I solve this?

CodePudding user response：

Please add use display: inline-block for displaying top and bottom box shadow. it will work

.overlay {
  display: inline-block;
  background-color: red;
  box-shadow: 2px -1px 0 10px red;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.overlay>span {
   display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #fff;
  margin:2px;
}

body {
  padding: 20px;
  color: #fff;
  font-size: 20px;
}

<div >
  <span>Category</span>
</div>

CodePudding user response：

You can use spread property in box-shadow to display shadow around every 4 edges of the element.

.overlay {
  display: inline-block;
  background-color: red;
  box-shadow: 0 0 0 20px red;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.overlay>span {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #fff;
  display:inline-block;
}

body {
  padding: 20px;
  color: #fff;
  font-size: 20px;
}

<div >
  <span>Category</span>
</div>

And there are tools for box-shadow that you can use to achieve the best form you want.