用CSS可普遍化的蝕刻線效果？

我想開發一個創建蝕刻線的一般化解決方案。我們的目標是無需手動爲需要蝕刻的每種配色方案選擇密切相關的顏色。問題似乎是，縮進部分的顏色與背景的顏色有關，對於創建三維效果而言有些關鍵。用CSS可普遍化的蝕刻線效果？

Below is an example in blue (the lines above the comment bubble/underneath the number "11")。我想我需要使用box-shadow，但不確定這是否是最好的方法。

如果box-shadow是我應該使用的，有沒有人知道如何設置它的CSS值，這樣可以工作，說灰線也可以用於說一條藍線？

enter image description here

來源

2012-12-01 tim peterson

你的意思是這樣的：底部邊框：1px的固體＃1C5380; ？我建議你檢查元素以找到合適的CSS。 – Vucko

謝謝@Vucko，我對可以應用於任何顏色的一般化解決方案感興趣。 –

你可以（使用rgba）使用帶有半透明的黑/白兩種顏色的邊界，這將變暗/減輕潛在的顏色。

例在http://dabblet.com/gist/4182495

添加具有:after/:before爲您提供了額外的動力在增加第二級邊界等僞元素..

來源

2012-12-01 14:08:19

- @ Gaby哦哇，這太棒了！謝謝！ –

- @ Gaby，我意識到邊界一直圍繞着，只是簡單地把'border：'換成'border-top：'並不能很好地工作。你可以在拍攝底部或頂部邊框時拍攝一張照片。 –

@timpeterson，不知道你的意思是什麼..邊界的確是。雖然只是第一個元素。 '.etched：first-child（2n）'除了第一個元素外都是目標對象，而我有'border-top：0'，它刪除了這些元素的上邊框。 –

以下是該評論指標略微簡化的CSS，我發現使用Chrome Web開發工具：如果您訪問的頁面，並檢查計數徽章元素

.media-bar .count-badge { 
    padding: 0 7px; 
    background: #1C5380; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2); 
    border-radius: 12px; 
}

，你將能夠打開和關閉盒子陰影樣式，這將顯示他們如何創建插入效果。

來源

2012-12-01 13:10:26 Douglas

- @ Douglas，如果有人想要使用藍色以外的其他配色方案，請將您的答案/評論添加到您的解決方案的可普遍性中？ –

使用的箱子陰影顏色是黑色和白色，這會使它們看起來相反的任何東西變暗和變亮，所以它非常普遍。爲了完全一般，你需要考慮使用[Lab color space]（http://en.wikipedia.org/wiki/Lab_color_space），但是你必須計算每種背景顏色的陰影顏色和不透明度。黑色和白色是一個很好的近似值。 – Douglas

嗨，道格拉斯，你的答案中的CSS看起來像是橢圓形徽章，而不是**它下面的線，這是我感興趣的。 –

我想有兩個邊界在一起：

border-bottom: 1px solid #1C5380; 
border-top: 1px solid rgba(255, 255, 255, 0.12);

來源

2012-12-01 13:19:28 Bidg

用CSS可普遍化的蝕刻線效果？

回答

相關問題