我想知道是否可以用纯 CSS 制作一个带有圆角和缩进边框的正方形。
目前我有这个：
#custom-square {
position: relative;
display: block;
width: 75px;
height: 75px;
border: 2px solid #8A6EF1;
border-radius: 10px;
background-color: white;
}
考虑到对齐所需的麻烦和代码量CSS 双曲线 https://stackoverflow.com/questions/28986125/double-curved-shape, SVG 似乎更合适。使用 svg 的其他一些原因是：
- 路径控制（颜色、宽度、曲线...）
- 使用纯色、渐变或图像控制填充
- 更少的代码
- 您可以将其显示在非纯背景（渐变或图像）上
- 维护用户交互的形状边界（悬停、单击...）
这是一个使用的基本示例内联 svg https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction with a 路径元素 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths.
曲线是用三次贝塞尔曲线 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
