Question

我需要使用框阴影在元素的三面创建一个像素阴影。我正在使用以下代码，除了它创建一个两像素边框，但我只需要一个。

   -moz-box-shadow: 0 1px 1px   #c00
-webkit-box-shadow: 0 0   1px 0 #c00
        box-shadow: 0 0   1px 0 #c00

Answer 1

尝试3个阴影，没有模糊。 http://jsfiddle.net/leaverou/8tgAp/1/

body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

    -moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    -webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}

Answer 2

使用普通边框声明是可行的方法，但如果 - 无论出于何种原因 - 您无法使用边框，则可以使用：before或：after伪选择器隐藏阴影的一侧。 / p>

示例：

body {background-color: #000; color: #fff}

.module {
    height: 100px;
    width: 100px;
    background-color: #000;
    -moz-box-shadow: 0 0 2px #f00;
    -webkit-box-shadow: 0 0 2px #f00;
    box-shadow: 0 0 2px #f00;
}

.module:before {
  content: '';
  border-top: solid #000 1px;
  display: block;
  position: relative;
  top: -1px;
}

您可以在此处看到它：http://jsfiddle.net/3nspR/

使用CSS3 box-shadow在三面上形成一个像素阴影

2 个答案: