在CSS中製作一個真正的螺絲頭

我的目標是製作一個看起來非常逼真的螺絲頭。所以現在我所做的是以下幾點：在CSS中製作一個真正的螺絲頭

<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; 

}

它也增加了螺絲周圍的一個小陰影，使它看起來像它彈出。我如何使這看起來「真實」。任何提示都會很棒！

來源

2013-07-28 Elmer

您是否在使用圖片時遇到問題？這將節省很多時間。 – caesay

這是一個相當模糊的問題。什麼看起來「真實」？ – deceze

@deceze：這不是真正的問題。當然，它有一點解釋，但他們想要更現實的東西。這非常簡單。 – caesay

嗯，這是我的嘗試。

我已經在圓上應用了灰色漸變，還添加了邊框並更改了陰影。

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-28 17:25:24 Cristy

在CSS中製作一個真正的螺絲頭

回答

相關問題