如何在CSS中製作凹進的按鈕

在下圖中，頂部圖像是我目前在網站上使用的圖像，它使用實際的圖像。如何在CSS中製作凹進的按鈕

我想要做的是使更多像使用純CSS的底部圖像，我不知道如何做到這一點，但任何人都可以幫忙嗎？

enter image description here

來源

2012-03-27 CodeDevelopr

'箱shadow'和我猜想，線性漸變是背景。你到底在做什麼？ – Ryan 2012-03-27 02:59:43

您是否在創建帶有圖片的灰色框？只是改變背景顏色和使用盒子陰影 - 我不確定你想要做什麼具體。 – mikevoermans 2012-03-27 03:03:14

你想創建陰影效果或更改圖片嗎？ – Starx 2012-03-27 03:05:56

CSS3有很多解決方案。試試這個：

div.exampleboxshadowj { 
background-color: #EEE; 
float: left; 
margin-top: 20px; 
margin-right: 40px; 
height: 65px; 
width: 160px; 
text-align: center; 
-webkit-box-shadow: inset -5px -5px 5px 5px#888; 
box-shadow: inset -5px -5px 5px 5px #888; 
}

雖然你可以改變顏色爲藍色，如果你想。

Here是您想要的所有信息的絕佳鏈接。

來源

2012-03-27 03:11:00 theJollySin

如果我理解你正確，你正在試圖改變，當它被點擊或者是活動圖像。如果是這樣，那麼您可以使用:focus或:active來產生這種效果。

這是一個demo與背景顏色，而不是一張圖片。

來源

2012-03-27 03:01:03 Starx

您可以嘗試使用這個鏈接來獲得關於這些按鈕的漸變效果（我沒有測試它自己）

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

我會想象，因爲它們使用background屬性，你會需要在某個位置容器內的按鈕上放置實際圖像。

只需在精靈圖中創建圖像並在點擊後切換背景位置，這將更容易，更可能更具跨瀏覽器友好性。

來源

2012-03-27 03:03:36

嗨，你可以使用這個CSS3的瀏覽器兼容CSS代碼爲您的要求： -

.shadow { 
    width:150px; 
    height:150px; 
    background-color: rgb(55,79,99); /* Needed for IEs */ 
    -moz-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9); 
    -webkit-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9); 
    box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9); 

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; 
    zoom: 1; 
}

或者看到現場演示： - http://jsfiddle.net/dte78/32/

and can read more about box shadow

來源

2012-03-27 05:38:45

如何在CSS中製作凹進的按鈕

回答

相關問題