嘗試使用投影中心文本

所以，我試圖將具有投影的texte居中。但不是與CSS屬性。我使用span et：之前讓它跨瀏覽器。所以，這是什麼樣子：嘗試使用投影中心文本

的HTML：

<h3 title="Say hello to Stack Overflow"><span>Say hello to Stack Overflow</span></h3>

而CSS：

h3 { 
    margin: 0 auto; 
    font-size: 29pt; 
    color: #fefefe; 
    letter-spacing: 1px; 
    position: relative; 
    color: blue; 
} 

span { 
    position: absolute; 
    top: 0; 
} 

h3:before { 
    display: block; 
    padding: 4px; 
    content: attr(title); 
    color: rgba(0, 0, 0, .15); 
}

的問題是，當我嘗試居中H3（與文本對齊），只有陰影部分去中心（here is a jsFiddle）

你有解決方案嗎？

來源

2011-10-23 Axiol

我拿出<span>（這是沒有必要），並添加了:before元素到原h3風格，這似乎工作：

h3:before, 
h3 { 
    text-align: center; 
    margin: 0 auto; 
    font-size: 29pt; 
    color: #fefefe; 
    letter-spacing: 1px; 
    position: relative; 
    color: blue; 
    width:100%; /* This was important for the :before content */ 
} 

h3:before { 
    display: block; 
    position:absolute; 
    padding: 4px; 
    content: attr(title); 
    color: rgba(0, 0, 0, .15); 
}

演示：http://jsfiddle.net/zLAcA/3/

注意：如果您打算使用跨瀏覽器，請不要使用rgba - 它不被支持。實際上，:before也沒有很好的支持 - 如果您打算進行漸進式增強，請嘗試CSS3 PIE ~~- 您將能夠在IE中使用 text-shadow屬性。~~

編輯：和CSS3PIE一樣，text-shadow不是支持的功能。如果影子很重要，您仍然需要解決方法。你目前所擁有的可能是最好的方法，但只能在IE8中工作，因爲在以前的版本中有no :before support。你可以爲IE瀏覽器try a filter，但祝你好運找到一個看起來不錯，對不起。

h3 { filter: DropShadow(Color=#d9d9d9, OffX=4, OffY=4, Positive=1); }

來源

2011-10-23 16:55:24

嗯，謝謝:)我會看看CSS3派，謝謝:) – Axiol

CSS3 PIE處理文本陰影？因爲我只看到箱子影子：/ – Axiol

嘿，你是對的，我的錯！更新後。我非常討厭IE。 –

由於在twitter上說：http://jsfiddle.net/zLAcA/2/

 

    h3 { 
     text-align: center; 
     margin: 0 auto; 
     font-size: 29pt; 
     color: #fefefe; 
     letter-spacing: 1px; 
     position: relative; 
     color: blue; 
     position:relative; 
    } 

    span { 
     position: absolute; 
     top: 0; 
    } 

    h3:before { 
     display: block; 
     padding: 4px; 
     content: attr(title); 
     color: rgba(0, 0, 0, .15); 
     position:absolute; 
    }

只是增加了一些位置，影子:)

來源

2011-10-23 15:31:44

嘗試使用投影中心文本

回答

相關問題