2009-12-02 55 views
0

我是新來的CSS的東西;從昨天開始(真的)瞭解了它,從那時起我做了一些模板,我進化得非常快,但有一件事我不明白。您如何在模板的某些部分製作陰影而不破壞佈局或處理新問題。如何在artisteer模板周圍創建陰影效果呢?

我已經創建了一個CSS/HTML模板,它具有玻璃效果,我可以使用浮動和絕對定位在一個稱爲包裝的相對div內工作,但它在IE7和IE6上無效但工作正常在所有FF版本上。

我的問題是:

如何創建一個下拉陰影角落找尋像Artisteer的做模板?

+0

歡迎來到StackOverflow。你可能會發現這個鏈接有趣:http://stackoverflow.com/faq – 2009-12-02 03:14:21

回答

0

日冰他們使用表:)

對於你希望它在IE瀏覽器,我認爲你的方法應該定義外箱的height這樣的:

<div id="box"> 
    <div class="corner tl"><!-- --></div> 
    <div class="corner tr"><!-- --></div> 
    <div class="corner bl"><!-- --></div> 
    <div class="corner br"><!-- --></div> 
</div> 

#box { 
    height: 100px; 
    position: relative; 
    width: 100px; 
} 
    .corner { 
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */ 
    display: block; 
    height: 10px; 
    position: absolute; 
    width: 10px; 
    } 
    .tl { top: 0; left: 0; background-position: 0 0; } 
    .tr { top: 0; right: 0; background-position: -22px 0; } 
    .bl { bottom: 0; left: 0; background-position: 0 -22px; } 
    .br { bottom: 0; right: 0; background-position: -22px -22px; } 
0

您好我已先行使自我擴展,不知道它會在IE7上工作,我有Windows 7,所以我有默認的IE8,不能真正測試它。我不得不說的是,我不知道設置「底部0」。 「left 0;」將使格粘到左下方和我不能感謝你纔好它就像一盞燈剛打開我的大腦,現在我可以做這麼多,也還在學習......

<style type="text/css"> 
#box { 

    position: relative; 
    width: 100px; 
} 
    .corner { 
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */ 
    display: block; 
    height: 10px; 
    position: absolute; 
    width: 10px; 
    } 
    .tl { top: 0; left: 0; background-position: 0 0; } 
    .tr { top: 0; right: 0; background-position: -22px 0; } 
    .bl { bottom: 0; left: 0; background-position: 0 -22px; } 
    .br { bottom: 0; right: 0; background-position: -22px -22px; } 

    .content {padding:10px;} 

</style> 

<div id="box"> 
    <div class="corner tl"><!-- --></div> 
    <div class="corner tr"><!-- --></div> 
    <div class="corner bl"><!-- --></div> 
    <div class="corner br"><!-- --></div> 
    <div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div> 
</div> 
相關問題