在頂部添加了堅實的白邊和左邊得到

頂部的邊框和離開包廂的是給它一個不錯的浮雕效果。我嘗試以下方法：

<!-- HTML --> 
<div id="nl-login"> 
</div> 

<!-- CSS --> 
*{ 
    margin:0; 
    padding:0; 
} 
html{ 
    width:100%; 
    height:100%; 
} 
body{ 
    background-color:#3E4C79; 
    width:100%; 
    height:100%; 
} 
#nl-login{ 
    width:400px; 
    height:250px; 
    background-color:#f0f0f0; 
    margin:40px auto; 
    opacity:0.3; 
    box-shadow:-1px -1px 2px #fff; 
    border:1px solid #fff; 
}

但它甚至沒有接近它。我認爲這與我擁有更好的一對邊框和箱形陰影值有關，而我似乎無法將它們歸結爲零。任何幫助？

這是一個fiddle以防萬一。

來源

2016-11-16 asprin

你知道'inset'，'border'和'ridge'邊框樣式，對吧？ – 2016-11-16 10:39:44

您使用opacity: 0.3;這裏影響整個元素以及它的孩子。正確的做法是使用rgba()背景顏色以及rgba()作爲邊框顏色。也去除右側和底部邊界產生所需的結果（至少接近的近似）

#nl-login{ 
    width:400px; 
    height:250px; 
    background-color:rgba(255, 255, 255, .3); 
    margin:40px auto; 
    /*box-shadow:-1px -1px 2px #fff;*/ 
    border:1px solid rgba(255, 255, 255, .7); 
    border-right-width: 0; 
    border-bottom-width: 0; 
}

https://jsfiddle.net/Kyle_Sevenoaks/3mjeLo00/1/

來源

2016-11-16 10:43:53 Kyle

很好的解釋。 Upvoted。不幸的是，我只能接受1個答案。這將是一個艱難的決定。 – asprin

不要讓整個元素半透明（，因爲這將影響所有後代元素）。在背景顏色上使用alpha。

而且您還可以使邊框半透明（而不使用任何陰影）。

#nl-login{ 
    width:400px; 
    height:250px; 
    background-color:rgba(240,240,240,0.3); 
    margin:40px auto; 
    border:1px solid; 
    border-color:rgba(240,240,240,0.5) /*top border*/ 
       rgba(0,0,0,0.5) /*right border*/ 
       rgba(0,0,0,0.5) /*bottom border*/ 
       rgba(240,240,240,0.5) /*left border*/; 
}

完整的示例

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #3E4C79; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#nl-login { 
 
    width: 400px; 
 
    height: 250px; 
 
    background-color: rgba(240, 240, 240, 0.3); 
 
    margin: 40px auto; 
 
    border: 1px solid; 
 
    border-color: rgba(240, 240, 240, 0.5) 
 
       rgba(0, 0, 0, 0.5) 
 
       rgba(0, 0, 0, 0.5) 
 
       rgba(240, 240, 240, 0.5); 
 
}

<div id="nl-login"> 
 
</div>

來源

2016-11-16 10:41:43

Upvoted。不幸的是，我只能接受1個答案。這將是一個艱難的決定。 – asprin

@asprin不用擔心。無論什麼最適合你。 –

你可以做到這一點使用box-shadow並刪除border和opacity並添加background爲rgba()

*{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
html{ 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
body{ 
 
\t background-color:#3E4C79; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
#nl-login{ 
 
\t width:400px; 
 
\t height:250px; 
 
\t background-color: rgba(240, 240, 240, 0.3); 
 
     box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset; 
 
\t margin:40px auto; \t 
 
}

<div id="nl-login"> 
 
</div>

來源

2016-11-16 10:41:45

Upvoted。不幸的是，我只能接受1個答案。這將是一個艱難的決定。 – asprin

你可以只用接壤做到這一點，只需使用rgba與愛人不透明度爲左和底部邊框。

body { 
 
    background-color: #3E4C79; 
 
    margin: 0; 
 
} 
 
#nl-login { 
 
    width: 400px; 
 
    height: 50px; 
 
    background-color: #737D9C; 
 
    margin: 40px auto; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.8); 
 
    border-left: 1px solid rgba(255, 255, 255, 0.4); 
 
    border-bottom: 1px solid rgba(62, 76, 121, 0.5); 
 
}

<div id="nl-login"></div>

來源

2016-11-16 10:43:31

Upvoted。不幸的是，我只能接受1個答案。這將是一個艱難的決定。 – asprin

我喜歡使用兩個逗號分隔box-shadow S：

box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.4), inset 1px 1px 1px 0px rgba(255, 255, 255, 0.4);

如this fiddle 。

在我們創建燈光效果時，使用陰影很有意義。此外，此技術允許模糊/傳播，並且如果您想將其用於其他效果，則可以使邊框和輪廓屬性可用。

來源

2016-11-16 10:59:27

已上傳。不幸的是，我只能接受1個答案。這將是一個艱難的決定。 – asprin

在頂部添加了堅實的白邊和左邊得到

回答

相關問題