如何製作圖像邊框？

我爲圖像添加了1個像素邊框。同時我試圖給圖像邊緣設置半徑。我的問題是，因爲圖像已經與Photoshop的圓角，邊緣的邊緣看起來比它應該更薄如何製作圖像邊框？

您可以從這裏檢查它。

我怎樣才能讓邊界什？

img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } 
<img src='http://carantina.com/wp/wp-content/themes/new/images/home_pic1.jpg'>

來源

2012-10-24 SNaRe

我想要這個東西http://jsfiddle.net/fVNgA/4/ –

@RohitAzad尋找邊緣。它是白色或非常薄。我希望他們是平等的。 – SNaRe

我認爲沒有理由downvote這個問題... –

裹圖像成span並添加css它

http://jsfiddle.net/96wVp/

來源

2012-10-24 10:54:31 RomanTheGreat

這是總體上最好的解決方案。謝謝。 – SNaRe

添加「padding：1px;」到圖像的風格:)

順便說一句，這裏是另一個線程概述了類似的問題，並針對原因是：CSS 3 border-radius property; corners too pale in Chrome?

來源

2012-10-24 10:47:31 chriskingnet

它會添加填充，這有時不是設計師想要什麼，看到我的答案下面的確切圖片 – RomanTheGreat

是的，我同意，這真的只是一個黑客我猜。我的主要觀點是，另一個線索可以解釋並導致與OP的需求更精確的匹配。對我來說，「1px填充」足夠好（當然，不關心額外的填充）。 – chriskingnet

Chrome使用方角的內邊框。所以在Chrome中，你將無法獲得確切的感覺，就像在Firefox中一樣，它甚至對於內部邊界也使用圓角。

在Chrome截圖和Firefox

我的建議是，最好是包括通用border-radius並且還爲Chrome，修復將增加overflow: hidden;和padding: 1px;。

CSS

img { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; /* Add this for fallback */ 
    overflow: hidden; /* Hack for Chrome */ 
    padding: 1px; /* Hack for Chrome */ 
    border: 1px solid #000; 
}

鉻哈克

來源

2012-10-24 10:47:54

不錯的解決方案，我必須記住這一點。我通常只是創建我的圖像，使他們沒有像我的解決方案中的黑客工作。但很好有另一種方式做它！ –

@RickCalder你改變了圖像？ –

是的。如果圖像具有透明背景，則不需要修復。這是我首選的方法。較少的代碼，適當的圖像開始。 –

後問題是沒有這麼多的邊界，因爲它是如何被應用和您所使用的圖像。嘗試使用6像素半徑在Photoshop中四角，並將其保存爲具有透明背景的png。發生什麼事是你放置一個邊界，然後邊界實際上是移動到圖像的角落。由於您的圖片是JPG格式，並且JPG格式不支持透明度，因此您的圓角實際上會有方形的白色邊角。這是一個帶有透明圖像而不是jpg的圖像示例。 http://jsfiddle.net/calder12/fVNgA/6/

代碼僅僅是因爲他們不會讓我張貼小提琴無碼......有時很有道理>>

<style>img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #000; } </style> 
<img src='http://calderonline.com/images/home_pic1.png'>

來源

2012-10-24 10:52:54

如何製作圖像邊框？

回答

相關問題