CSS雙邊框與第二邊框一路要去元素

enter image description here

正如你所看到的，它可以很容易地實現這樣的：

border-top: 1px solid #E2E2E2; 
border-left: 1px solid #E2E2E2; 
border-bottom: 1px solid #848484; 
border-right: 1px solid #848484;

然後我們添加：

box-shadow: 0.7px 0.7px 0 0.7px hsl(0, 0%, 0%);

但是！這會產生這樣的：

enter image description here

其在底部和右側，而不是1px的一個2pxborder，由於箱陰影有效地增加頂部的性質和其他互留1個像素。綱要不會這樣做，因爲這會一路走來。有沒有什麼辦法可以在右側和底部按1px裁剪？

來源

2014-09-24 Steven Ellen Starar

看起來像一個PX缺少... – Fergoso 2014-09-24 15:45:34

@Fergoso在哪裏？ – 2014-09-24 15:51:25

這裏有一個JSBin演示：http://jsbin.com/reqev/1/edit?html,css,output

儘管你的頭銜，我用了一個盒子陰影來實現效果你是否願意。既然你已經試過了box-shadow，我認爲你並沒有完全反對它，只是沒有運用你自己的實現。如果我的假設不正確，我很抱歉。

這裏的CSS：

body { 
    background: white; 
} 
button { 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    border-top: none; 
    border-left: none; 
    background: #ddd; 
    box-shadow: inset 1px 1px #e2e2e2, 
       inset -1px -1px #848484; 
    padding:  5px 20px; 
}

來源

2014-09-24 15:45:59

不錯的羅伯特！ – Fergoso 2014-09-24 15:47:24

啊，當然！如此聰明，使用內在的陰影效果並將邊框放在外部，完美，謝謝！編輯：我已經改變了主題標題，以反映它不是使用box-shadow的問題;） – 2014-09-24 15:49:57

你可以做到這一點有兩個元素，而不是一個：

<div id="x"><div id="z">Button</div></div>

CSS

#x { 
    border-top: 1px solid #E2E2E2; 
    border-left: 1px solid #E2E2E2; 
    border-bottom: 1px solid #000000; 
    border-right: 1px solid #000000; 
    background-color: #ddd; 
    display: inline-block; 
    cursor: pointer; 
} 
#z { 
    padding: 5px 10px; 
    border-bottom: 1px solid #838383; 
    border-right: 1px solid #838383; 
}

這裏有一個小提琴：http://jsfiddle.net/28z9mo8w/3/

來源

2014-09-24 15:37:58

這可以通過使用:: after僞元素進一步簡化嗎？ – 2014-09-24 15:39:38

有什麼不同嗎？順便說一句，我改變你的代碼.http：//jsfiddle.net/28z9mo8w/5/ – 2014-09-24 15:42:29

@ToddMark缺少原始按鈕的內部斜角的底部較淺的顏色 – 2014-09-24 15:45:34

我覺得這是仍在使用的box-shadow，但插圖設置爲它

所以E2E2E2成爲topand左邊框可行的00000變成了右和底部邊界和848484上變爲225度

的插入盒陰影例如參見此代碼

https://github.com/necolas/css3-facebook-buttons

來源

2014-09-24 15:48:05