2017-05-30 70 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

这不是真正的我需要什么,我已经更新了我的问题。 –