圖像與CSS的內部邊界？

我想使用css在我的內容div中的所有圖像上添加一個白色邊框。頁眉和頁腳div區域中的圖像不應受到影響。我如何實現這一目標？看下面的示例圖片。網頁上有不同尺寸的圖片。圖像與CSS的內部邊界？

見圖片：

Image with inner border

來源

2013-10-03 user2369812

在這裏看到：HTTP：//計算器。com/questions/9051228/css-internal-border 而你想要的工作解決方案： http://jsfiddle.net/ThinkingStiff/bNmzB/ –

@EricHotinger這些答案只適用於一個堅實的「背景」，而不是一種模式。 – cimmanon

@cimmanon - 他沒有堅實的背景嗎？我看不到任何圖案。 –

你可以做到這一點，而無需額外的元素或僞元素：

http://cssdeck.com/labs/t6nd0h9p

img { 
    outline: 1px solid white; 
    outline-offset: -4px; 
}

IE9 & 10不支持的輪廓印性質，但在其他方面的支持還是不錯的：http://caniuse.com/#search=outline

不需要知道圖像的尺寸替代的解決方案：

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div> 

div.ie-container { 
    display: inline-block; 
    position: relative; 
} 

div.ie-container:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: 4px; 
    right: 4px; 
    bottom: 4px; 
    left: 4px; 
    border: 1px solid white; 
} 

img { 
    vertical-align: middle; /* optional */ 
}

來源

2013-10-03 13:37:28 cimmanon

儘管存在向後兼容性問題，但我仍喜歡這種方式。好一個。 –

這將是我的首選選項，但我們主要是Internet Explorer內部。有沒有其他的例如使用JavaScript？其他例子似乎都要求您指定圖像大小。我想這會自動應用於所有圖像。 – user2369812

這可能是一個更好的問題，作爲一個新問題提出。從本質上講，你需要做其他答案正在做的事情：動態創建一個額外的元素並將邊界應用到該元素上。我添加了一個替代解決方案，它使用了一個附加元素，並且不需要知道圖像的尺寸。如果是我，我不會爲了支持這些瀏覽器而經歷這些環節，因爲這只是一個小小的美化效果。 – cimmanon

無論DIV ID或類，你可以簡單地添加

#yourDivIDExample { 
... 
} 

#yourDivIDExample img{ 
border:1px solid #ffffff; 
}

這將創建在div本身的圖像周圍的邊框..相同的作品類或全球規則也..

img { 
border:1px solid #ffffff; 
}

來源

2013-10-03 13:14:13 Pogrindis

你可以試試這個：

HTML：

<div class="image"> 
    <div class="innerdiv"> 

    </div> 
</div>

的CSS：

.image 
{ 
    width: 325px; 
    height: 239px; 
    background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat; 
    padding: 10px; 
} 

.innerdiv 
{ 
    border: 1px solid white; 
    height:100%; 
    width: 100%; 
}

jsFiddle

希望這是你的意思:)

來源

2013-10-03 13:14:48 nkmol

你可以做這樣的事情DEMO

的HTMl

<div class="imgborder"> 
    <div class="in-imgborder"> 

    </div> 
</div>

CSS

.imgborder { 
    width: 300px; 
    height: 300px; 
    position: relative; 
    background: url(http://placekitten.com/300/300) no-repeat; 
} 
.in-imgborder { 
    width: 290px; 
    height: 290px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    border: 1px solid red; 
}

來源

2013-10-03 13:18:11

我用box-shadow: inset和works with IE11 and up解決了這個問題。我想要在圖像周圍的邊角處有一個邊框，但這個例子的邊界爲10px。它需要父母div與:before或:after元素，但處理得很好。

.image { 
    width: 100%; 
    height: auto; 
} 

.image__wrapper { 
    position: relative; 
} 

.image__wrapper:before { 
    content: ''; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    box-shadow: inset 0 0 0 3px red; 
}

CodePen Demo

來源

2017-02-03 16:57:19 Calsal

圖像與CSS的內部邊界？

回答

相關問題