如何在CSS中制作凹进按钮

Question

在下图中，顶部图片是我目前在网站上的图片，它使用的是实际图片。

我想要做的是使用纯CSS制作更像底部图像的东西，我不知道如何做到这一点，任何人都可以帮忙吗？

Answer 1

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是您可能需要的所有信息的绝佳链接。

Answer 2

如果我理解正确，您正在尝试在单击或激活时更改图像。如果是这样，您可以使用:focus或:active来产生此类效果。

这是demo，背景色而非图片。

Answer 3

您可以尝试使用此链接获取这些按钮的渐变效果（我自己没有测试过）

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

我想，因为他们使用background属性，你需要在某些位置容器内的按钮上有实际的图像。

只需在精灵地图中创建图像并在单击时切换背景位置，就可以更轻松，更可能跨浏览器友好。

Answer 4

您可以根据您的要求使用此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