CSS如何创建具有非线性边框的容器
我需要为具有这种边框的文本重新创建一个容器： 正如你从图像中看到的，容器的边界不是直的，所以我不知道从哪里开始。。既然容器中有文本，而且网站会有响应，我怎么可能重新创建这种效果呢CSS如何创建具有非线性边框的容器,css,Css,我需要为具有这种边框的文本重新创建一个容器： 正如你从图像中看到的，容器的边界不是直的，所以我不知道从哪里开始。。既然容器中有文本，而且网站会有响应，我怎么可能重新创建这种效果呢 有人能给我指一下正确的方向吗 使用边框图像渲染边框。 您可以使用来轻松生成css代码，但是如果框的大小大于图像，并且图像（像您的一样）没有可重复的部分，那么结果将不会完美 另一个想法是使用SVG作为背景图像/容器本身，因为SVG是基于向量的，可以拉伸，并且可以根据需要定义路径。Userborder image b
有人能给我指一下正确的方向吗 使用边框图像渲染边框。 您可以使用来轻松生成css代码，但是如果框的大小大于图像，并且图像（像您的一样）没有可重复的部分，那么结果将不会完美
另一个想法是使用SVG作为背景图像/容器本身，因为SVG是基于向量的，可以拉伸，并且可以根据需要定义路径。User
border image border-style: solid;
border-width: 27px;
-moz-border-image: url(http://i.stack.imgur.com/qo9CL.png) 27;
-webkit-border-image: url(http://i.stack.imgur.com/qo9CL.png) 27;
-o-border-image: url(http://i.stack.imgur.com/qo9CL.png) 27;
border-image: url(http://i.stack.imgur.com/qo9CL.png) 27 fill;
您只需使用html和css边框样式就可以做到这一点
.border容器{
溢出：隐藏；
}
.花边{
边框：4px实心#B9C464；
背景：#DCE2B4；
变换：旋转（0.5度）；
}
.波浪边界{
边框：1px虚线#B9C464；
变换：旋转（-0.5度）；
身高：100%；
宽度：100%；
填充物：5px；
框大小：边框框；
}
.一{
高度：50px；
宽度：400px；
颜色：#fff；
}
此处文本