內部邊框CSS - 可能

我想知道是否有一個屬性用於設置元素的外部和內部邊框，例如我想要將深灰色邊框作爲外邊框，將白色作爲內邊框..我附加了一個圖像爲了明確我的觀點，我可以做到這一點與2層，一個作爲家長與深灰色的邊界，另一個作爲與白色邊界的孩子，但必須有一個更好的和有效的方式。請指導，如果你有正確的概念，實現這.. ..感謝您的時間..歡呼聲 enter image description here 內部邊框CSS - 可能

來源

2014-03-28 user1718343

的[？模擬「內邊框」，在CSS]可能重複（http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css ） –

可能重複的[CSS Border Inside Div不在邊緣]（http://stackoverflow.com/questions/9601357/css-border-inside-div-not-on-edge） –

[CSS嵌入邊框] （http://stackoverflow.com/questions/8452739/css-inset-borders） –

您可以使用插入盒陰影。 DEMO

button { 
    border: solid 1px #aaa; 

    // Adds the inner "border" 
    box-shadow: 0 0 1px #fff inset; 

    background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%); 
    padding: 20px; 
    border-radius: 10px; 
}

如果你想設置的「寬度」的邊界，你可以使用第四值。例如有3px的廣泛插圖的box-shadow：上箱陰影

box-shadow: 0 0 0 3px #fff inset;

更多信息，MDN

來源

2014-03-28 20:28:55 Mathias

是的，最好的和有效的方式:)這真的很酷..謝謝..救了我一些時間..讚賞.. – user1718343

你'歡迎光臨！請接受答案，如果它解決了你的問題:) – Mathias

使用CSS3漸變來代替。留下你的外邊框，並停止從邊緣幾個像素。你可以在這裏嘗試：

http://www.colorzilla.com/gradient-editor/

來源

2014-03-28 20:29:19

雖然只適用於頂部/底部或左/右邊界，對吧？我敢打賭，使用這種方法實現這一點的代碼看起來很討厭.... –

內部邊框CSS - 可能

回答

相關問題