使用CSS创建嵌入式暗影效果

问题描述

| 我正在尝试获得类似CSS中的嵌入式阴影效果的效果，如下图所示： （来源：gyazo.com） 有谁知道我如何用CSS达到这种效果？     

解决方法

        答案已经给出了（

box-shadow: inset ..

），因此这里是其工作原理的快速演示： http://jsfiddle.net/L6nJj/ 重要的是is1。 有关可用选项的说明：https://developer.mozilla.org/en/css/box-shadow#Values 请确保考虑到浏览器对ѭ2support的支持，这是因为它在IE的较旧版本中不起作用，但在其他任何地方都可以使用“ http://caniuse.com/css-boxshadow”     ,        这里的关键是多个框阴影，左上角有一个较大的深色插图，下面是一个非常微妙的阴影，即比背景要亮一些。 请注意，框阴影的形式为“ x偏移，y偏移，模糊，颜色” 学习使用模糊量和多个阴影，您可以做出一些非常不错的效果。 样式示例（用于显示在＃222背景上）：

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000,0px 1px 1px #333;
}

    ,        看一下CSS3的2属性，特别是插入框阴影。本文中的示例L应该可以提供您想要的效果。