SOURCE

let dom = document.querySelector('.content')
function reset () {
  dom.classList.remove('outline')
  dom.classList.remove('box_shadow')
}
function setBoxShadow () {
  reset()
	dom.classList.add('box_shadow')
}
function setOutline () {
  reset()
	dom.classList.add('outline')
}

<div class="content">hello,world</div>

<div class="test">
  <p>ceshiceshi</p><p>ceshiceshi</p><p>ceshiceshi</p>
</div>
<button onclick="setBoxShadow();">box-shadow</button>
<button onclick="setOutline();">outline</button>
<button onclick="reset();">clear</button>

.content{
  display: inline-block;
  padding: 5px 10px;
  font-size: 16px;
  color: #fff;
  background-color: #ff3666;
  border-radius: 5px;
}
.outline{
  outline: 9999px solid rgba(0,0,0,.5);
}
.box_shadow{
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
.test p{
  color: #fff;
  background-color: #43d4cd;
}