在CSS中的雙重邊框

我從頭開始創建PHP，基於Javascript的照片庫在CSS中的雙重邊框

問題是，我想要區分簡單圖片和相冊。

那麼簡單的圖片邊框看起來像

enter image description here

這有可能創造像照片相冊邊界的Facebook（雙邊框，創建多個圖像效果）通過CSS或CSS3？

enter image description here

P.S不知道它是否將有可能與舊的CSS standarts。我的意思是，CSS3可能可以做到，但不會向後兼容。另一方面，目前我的PHP端產生100x100像素大拇指。如果我會增加大拇指的大小，我需要一些不會被破壞的東西。提前

來源

2012-03-12 heron

這是你在找什麼？

jsfiddle

HTML：

<div class="facebook-album"></div>

CSS：

.facebook-album, .facebook-album:before 
{ 
    background: red; 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    border: 3px solid #FFF; 
    box-shadow: 0 0 0 1px #999; 
    position: relative; 
} 
.facebook-album:before 
{ 
    margin: 0; 
    content: ""; 
    position: absolute; 
    top: -7px; 
    left: -7px; 
    background: white; 
    z-index: -1; 
}

來源

2012-03-12 17:50:30

~~THX使用僞元素像 :before或 :after，例如：~~ 事實證明，大多數瀏覽器don't like :before on images，因爲它不是一個包含文本元素。你仍然可以做到這一點，如果你在一個替代元素，如div，並將div的背景設置爲原始圖像。或者，你可以嘗試： http://jsbin.com/otivaj/edit#html,live

來源

2012-03-12 17:39:37

不能得到這個工作。請發佈jsFiddle – heron 2012-03-12 17:46:32

@epic_syntax確定，給我一分鐘左右。 – 2012-03-12 17:46:57

+1個不錯的演示和努力！ – 2012-03-12 18:02:42

你可以看看Facebook的源代碼。這也將工作：

http://jsfiddle.net/g9A6a/

來源

2012-03-12 17:41:55

這不是我所需要的。 http://jsfiddle.net/tt13/g9A6a/5/ – heron 2012-03-12 17:49:26

不是？看起來絕對完美。究竟是什麼問題？ – 2012-03-12 17:54:16

是的，你絕對可以用CSS做到這一點。它看起來像你所有的圖像都是相同的大小，這將使這非常簡單。只需將<img>放置在包含position: relative;和偏移量的元素中。容器和圖像都應該有一個邊框，填充和補償您的願望。根據子圖像的尺寸設置包含元素的寬度和高度。

這裏是一個 DEMO on jsfiddle

來源

2012-03-12 17:42:28 cmw

我不知道你能達到與簡單的CSS2這種效果。如果添加更多標記是一個選項，我會做這樣的事情：

<ul> 
<li><img></li> 
</ul> 

li { 
    position: relative; 
    border: 1px solid gray; 
} 
img { 
    padding: 6px; 
    border: 1px solid gray; 
    position:absolute; 
    top:6px; 
    left: 6px; 
    background-color:white; 
}

來源

2012-03-12 17:45:39

不起作用。 http://jsfiddle.net/tt13/g9A6a/4/這不是我所需要的 – heron 2012-03-12 17:48:28

在CSS中的雙重邊框

回答

相關問題