介绍
炫酷边框
# 炫酷边框
- 快速查看 (opens new window) 写一个炫酷边框效果
width有一个方法fit-content可以通过内容自适应宽度 十分的好用
<body>
<div class="demo">炫酷小盒</div>
</body>
<style>
.demo {
/* 通过内容自适应宽度 */
width: fit-content;
box-shadow: 0 0 2px #00ffff inset;
background: linear-gradient(#00ffff, #00ffff) left top,
linear-gradient(#00ffff, #00ffff) left top,
linear-gradient(#00ffff, #00ffff) right bottom,
linear-gradient(#00ffff, #00ffff) right bottom;
background-repeat: no-repeat;
background-size: 1px 6px, 6px 1px;
background-color: rgba(255, 255, 255, 0.4);
color: #fff;
font-size: 16px;
padding: 4px 10px;
}
</style>