この記事は書いてから 約 4年 経過しています。 1年以上経過しているので情報が古い可能性があります。
.borderBG{ display: inline-block; width: auto; height: auto; padding: 1px; background: linear-gradient(#05FBFF, #1E00FF);}
.borderBG .inner{ width: 498px; height: 98px; background-color: #fff;}
<div class="borderBG">
<div class="inner">
<!-- 内容 -->
</div>
</div>
#test{ height: auto;}
#test li{ float: left; font-size: 12pt; font-family: 'Yantramanav', sans-serif; text-align: center; list-style: none; width: 150px; height:auto; margin: 10% 10px; border-left:1px solid #05F9FF; border-right:1px solid #1D64F0;}
#test li:before,
#test li:after{ display:block; content:""; height:1px; width:100%; margin: 0 0; background:-webkit-gradient(linear, left top, right bottom, from(#05F9FF), to(#1D64F0)); background:-moz-linear-gradient(left, #05F9FF, #1D64F0); background:linear-gradient(left, #05F9FF, #1D64F0); }
.test_box{ padding: 5% 0; width: 100%; overflow: hidden;}
<ul id="test">
<li><div class="test_box">内容</div></li>
<li><div class="test_box">内容</div></li>
<li><div class="test_box">内容</div></li>
</ul>
© 2013-2019 visual hallucination.