創建div爲圖像

Question

我想知道是否可以在html和css中創建div作爲圖片，如果可能的話，它怎麼可能？

我有這樣的：http://jsbin.com/kokuc/1/edit

我可以設置每邊的大小？所以我們可以做更大的底面

Answer 1

在這個時代，你將無法在元素上獲得這種類型的邊框（像素化）。

所以做這樣的事情的理想方式是使用div的背景圖像。

div { 
    background-image: url('../link/to/image.png'); 
} 

爲什麼？因爲現在這種類型的8位邊框和輸出已過時。沒有操作系統或網絡瀏覽器可以讓你做到這一點，並使用CSS，如果你甚至可以設法這樣做將是非常困難的。因此留下使用background-image來設置這種邊界和所有其他東西的選項。

Answer 2

是的這是相當簡單的事情。

您可以在css background屬性中使用圖像。以此代碼爲例：

background: url(http://i.imgur.com/pGzLkoF.png); 

您需要調整div大小以適合圖片。您也可以將圖片保存到文件目錄中，然後將文件的路徑放入url()而不是您發佈的網址。

Answer 3

正如其他人提到的;像素化的角落必須來自背景圖像。

但是顏色和圓角當然可以是純粹的網頁代碼。

注意：不準確。但應該很容易讓你到那裏。

#cooldiv { 
    border:2px solid #a1a1a1; 
    padding:10px 40px; 
    background-image: url('transparent.png'); 
    width:300px; 
    border-radius:25px; 
} 

Answer 4

嗯......這是可能的純CSS，但我不會建議它，因爲它是不是很實用。

如上所述，最好的選擇是使用background-image。如果你需要某些信息來響應每一個尺寸，並希望有一定的靈活性，那麼我會建議一個SVG圖像（可縮放矢量圖形），因爲它可以調整到任何屏幕尺寸。 SVG也有IE8 < =這應該是要考慮的事情。

這裏是我做到了這一點，

HTML：

<div class="frame"> 
    <div class="frame-1"> 
     <div class="top-1"></div> 
     <div class="middle-1"></div> 
     <div class="bottom-1"></div> 
    </div> 
    <div class="frame-2"> 
     <div class="top-2"></div> 
     <div class="middle-2"></div> 
     <div class="bottom-2"></div> 
    </div> 
    <div class="frame-3"> 
     <div class="top-3"></div> 
     <div class="middle-3"></div> 
     <div class="bottom-3"></div> 
    </div> 
    <p>Here is some text or whatever that will go in this abomination.</p> 
</div> 

CSS：

.frame { 
    width: 600px; 
    margin: 0 auto; 
    position: relative; 
} 

.frame p { 
    position: absolute; 
    display: block; 
    width: 80%; 
    height: 80%; 
    left: 10%; 
    margin-top: 10%; 
    text-align: center; 
} 

.frame-1 { 
    width: 600px; 
    position: absolute; 
} 

.top-1, .middle-1, .bottom-1 { 
    background: black; 
    position: absolute; 
} 

.top-1 { 
    width: 90%; 
    height: 300px; 
    left: 5%; 
} 

.middle-1 { 
    width: 96%; 
    height: 280px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-1 { 
    width: 100%; 
    height: 260px; 
    top: 20px; 
} 

.frame-2 { 
    width: 570px; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
} 

.top-2, .middle-2, .bottom-2 { 
    background: rgb(46, 170, 228); 
    position: absolute; 
} 

.top-2 { 
    width: 90%; 
    height: 270px; 
    left: 5%; 
} 

.middle-2 { 
    width: 96%; 
    height: 250px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-2 { 
    width: 100%; 
    height: 230px; 
    top: 20px; 
} 

.frame-3 { 
    width: 540px; 
    position: absolute; 
    top: 30px; 
    left: 30px; 
} 

.top-3, .middle-3, .bottom-3 { 
    background: rgb(147, 200, 235); 
    position: absolute; 
} 

.top-3 { 
    width: 90%; 
    height: 240px; 
    left: 5%; 
} 

.middle-3 { 
    width: 96%; 
    height: 220px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-3 { 
    width: 100%; 
    height: 200px; 
    top: 20px; 
} 

最後，小提琴：Demo

撥弄陰影沒有完全連：Demo