自定义表单边框

Question

我正在为我的网站上的情人节做主题，并想知道是否有可能制作自定义表单边框，例如一个心脏？当然，我可以在需要的地方放置图片，但这太硬编码了。

为什么我不想硬编码也是因为我有照片（虽然是固定大小）和一个小文本的动态内容生成，我不希望出现任何问题。

那么，有没有办法？

Answer 1

CSS Tricks有一篇关于使用只包含心脏形状的HTML和CSS的自定义形状的优秀文章。该心脏形状建议由Nicolas Gallagher：

#heart { 
    position: relative; 
    width: 100px; 
    height: 90px; 
} 
#heart:before, 
#heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: red; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
     -moz-transform-origin: 0 100%; 
     -ms-transform-origin: 0 100%; 
     -o-transform-origin: 0 100%; 
      transform-origin: 0 100%; 
} 
#heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
     -moz-transform-origin: 100% 100%; 
     -ms-transform-origin: 100% 100%; 
     -o-transform-origin: 100% 100%; 
      transform-origin :100% 100%; 
} 

有趣，因为这听起来可能，它使用只有一个元素！

Answer 2

这是一篇很棒的文章！

上面的文章是太棒了。

如果您在边框内想要的内容是固定尺寸，或者如果您想要在不使用代码的情况下想要特定的心形，另一个非常安全的选择是使用伪元素添加图像边框。

东西沿着这些路线：

/* content */ 

.content { 

    position: relative; 

} 

/* heart wrapper */ 

.content:before { 

    background: url(image/heart.png); 
    position: absolute; 
    height: 300px; 
    width: 300px; 
    content: ''; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    top: 0; 

}