自定義表單邊框

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; 

}