2

我的目标是制作一个看起来非常逼真的螺丝头。所以现在我所做的如下：

<div class="screw"><div class="indent"></div></div>

.screw {

    position: absolute;
    top: 10px;
    left: 49%;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-image: url('img/nail-head.jpg');
    -moz-box-shadow: 0px 3px 8px #000;
    -webkit-box-shadow: 0px 3px 8px #000;
    box-shadow: 0px 3px 8px #000;

}
.indent {

    height: 10px;
    width: 30px;
    margin-top: 10px;
    background-image: url('img/nail-head.jpg');
    -moz-box-shadow: inset 0px 3px 8px #222;
    -webkit-box-shadow: inset 0px 3px 8px #222;
    box-shadow: inset 0px 3px 8px #222;
    transform:rotate(150deg);
    -ms-transform:rotate(150deg); 
    -webkit-transform:rotate(150deg);
    border-radius: 2px;

}

它还在螺钉周围添加了一个小阴影，使其看起来像是弹出来的。我如何让这看起来“真实”。任何提示都会很棒！

4

1 回答 1

7

好吧，这是我的尝试。

我在圆圈上应用了灰色渐变，还添加了边框并更改了阴影。

box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);

http://jsfiddle.net/Hfw2D/

注意：我还没有为所有浏览器（-ms、-moz 等）编写规则。在铬上测试。

于 2013-07-28T17:25:24.047 回答