我想知道是否有可能在纯CSS中制作一个带圆角的方形和一个缩进的边框.
目前我有这个:
#custom-square {
position: relative;
display: block;
width: 75px;
height: 75px;
border: 2px solid #8A6EF1;
border-radius: 10px;
background-color: white;
}
考虑到将双曲线与CSS对齐所需的代码麻烦和数量,SVG似乎更合适.在这里寻找svg的其他一些原因是:
控制路径(颜色,宽度,曲线......)
用纯色,渐变或图像控制填充
更少的代码
你可以在非普通背景(渐变或图像)上显示它
维护用户交互形状的边界(悬停,点击......)
这是使用带有path元素的内联svg的基本示例.
使用Cubic Bezier曲线绘制曲线:
svg{width:30%;}另一种用于创建此边界的纯CSS方法是使用border-image属性.所需的只是创建具有所需边框形状的图像,并使用该border-image-source属性将其设置为元素.
.shape.large {
height: 300px;
width: 300px;
border-image-source: url(http://i.stack.imgur.com/Qkh6A.png);
border-image-width: 34px; /* the width of the border portions in the image - refer to image at the end of the answer for the exact portion details*/
border-image-slice: 34; /* equal to border-image-width */
border-width: 34px; /* equal to border-image-width */
}
.shape.small {
height: 100px;
width: 100px;
border-image-source: url(http://i.stack.imgur.com/Mra4B.png);
border-image-width: 14px;
border-image-slice: 14;
border-width: 14px;
}
.shape.small.fill {
background: aliceblue content-box;
border-image-source: url(http://i.stack.imgur.com/Ovj03.png);
border-width: 14px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/800/800/abstract/2);
}
.shape.small {
float: left;
}
.shape.large {
clear: both;
}Some content
Some content
Some content
京公网安备 11010802040832号 | 京ICP备19059560号-6 