我想知道是否可以在纯CSS中创建一个圆角的方形和缩进的边框。
目前我有这个：
#custom-square {
position: relative;
display: block;
width: 75px;
height: 75px;
border: 2px solid #8A6EF1;
border-radius: 10px;
background-color: white;
}
解决方法
考虑到需要调整
double curves with CSS的麻烦和代码量，SVG似乎更合适。 svg的其他几个原因是：
>控制路径(颜色，宽度，曲线…)
>用简单的颜色，渐变或图像来控制填充
>少代码
>您可以在非平原背景(渐变或图像)上显示它
>维护用户交互形状的界限(悬停，点击…)
这是使用inline svg与path element的基本示例。
曲线绘制为Cubic Bezier curves：
svg{width:30%;}
<svg viewBox="0 0 10 10"> <path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z" fill="none" stroke-width="0.2" stroke="#8A6FF2" /> </svg>
