2017-05-30 21 views
-1

如何給每個字母組成一個邊框?a-text -tag?我需要這樣,但與A型架的東西a-text - 標籤:A幀字體邊框?

p { 
 
    font-size: 40px; 
 
    color: yellow; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
}
<p>lorem ipsum dolor sit amet</p>

更新:我已經下一個情況:在我的場景我做了一些gazebuttons因爲你不不知道這些按鈕是做什麼的,我在這個按鈕上添加了一些文字。問題是當我使用靜態顏色的按鈕中的文字。默認我使用黑色,但在黑色背景下,文字不可讀。所以我會添加一個與該文本的邊界,以便您可以閱讀它。

所以文本必須站在場景內部,並且必須在場景內旋轉。在@ngokevin的示例代碼中,文本具有靜態位置。

回答

0

使用https://github.com/mayognaise/aframe-html-shader

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/aframe-html-shader.min.js"></script> 

    <body> 
    <a-scene> 
     <a-plane material="shader: html; target: #planeHTML" position="0 2 -6"></a-plane> 
    </a-scene> 

    <!-- HTML to render as a material. --> 
    <div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden"> 
     <div id="boxHTML" style="background-image: url(cheesecake.png); color: white; width: 500px; height: 500px; font-size: 64px; font-family: monospace; text-align: center"> 
     <p style="background: rgb(30, 30, 30); position: absolute; top: 25px; width: 500px">CHEESECAKE FOR YOU</p> 
     </div> 
    </div> 
    <div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden"> 
     <div id="planeHTML"> 
     <p style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Lorem ipsum</p> 
     </div> 
    </div> 
+0

這不是真正的我需要什麼,我已經更新了我的問題。 –