<div class="text-stroke-wrap01">
  <p class="text-stroke01">プラスワン</p>
</div>
<div class="text-stroke-wrap02">
  <p class="text-stroke02">プラスワン</p>
</div>
<div class="text-stroke-wrap03">
  <p class="text-stroke03">プラスワン</p>
</div>

div {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:150px;
}

.text-stroke-wrap01,.text-stroke-wrap03{
  background-color:#fff;
}

.text-stroke-wrap02{
  background-color:#000;
}

p{
  margin:0;
  padding:0;
  
  font-size: 45px;
  font-weight: bold;
  
  text-align: center;
}

.text-stroke01 {
  -webkit-text-stroke: 3px #777;
  color: #9effff;
}

.text-stroke02 {
  -webkit-text-stroke: 3px #fff;
  color: #4c6cb3;
}

.text-stroke03 {
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #777;
  -webkit-text-fill-color: #9effff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.