原文地址：3.纯 CSS 创作一个容器厚条纹边框特效
没有啥好点子呀，不爽
HTML代码：
<div class="box"> ???????<div class="content"> ?????????????<h2>What is Lorem Ipsum?</h2> ?????????????<p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices. ???</p> ??????</div></div>
css代码：
/* 内容居中显示： */html,body,.box .content { ???height: 100%; ???display: flex; ???align-items: center; ???justify-content: center;}/* 画条纹背景： */.box { ???width: 300px; ???height: 300px; ???/* linear-gradient的解说： http://www.runoob.com/cssref/func-linear-gradient.html */ ???background: linear-gradient( ???????-45deg, ???????white 0%, ???????white 25%, ???????hotpink 25%, ???????hotpink 50%, ???????white 50%, ???????white 75%, ???????hotpink 75%, ???????hotpink 100% ???); ???background-size: 10%; ???box-sizing: border-box; ???padding: 15px; ???animation: animate 2s linear infinite;}.box .content { ???background-color: white; ???flex-direction: column; ???box-sizing: border-box; ???padding: 30px; ???text-align: center; ???font-family: sans-serif;}.box,.box .content { ???box-shadow: 0 0 2px deeppink, ???????????????0 0 5px rgba(0, 0, 0, 1), ???????????????inset 0 0 5px rgba(0, 0, 0, 1); ???border-radius: 10px;}.box .content h2 { ???color: deeppink;}.box .content p { ???color: dimgray;}@keyframes animate { ???from { ???????background-position: 0; ???} ???????to { ???????background-position: 10%; ???}}前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10089602.html