小编Dan*_*ams的帖子

CSS SVG文本阴影位于文本之上

我只是想在一些文本后面放一个阴影,但阴影似乎显示在文本的顶部.我正在使用Google Chrome.这是一张图片:

在这里,它在您的浏览器中呈现:

#title {
  fill: white;
  color: white;
  display: block;
  margin: auto;
  text-shadow: 10px 10px 3px black;
  font-size: 400%;
  text-align: center;
  font-family: consolas;
  font-weight: bold;
  stroke: #F08000;
  stroke-width: 1px;
}

Run Code Online (Sandbox Code Playgroud)

<svg style="background:rgba(0, 255, 255, 0.2); width:100%; height:calc(20vh + 20px); margin:auto; display:block;">
   <text id="title" text-anchor="middle" x="50%" y="20vh">Software</text>
</svg>

Run Code Online (Sandbox Code Playgroud)

html css svg css3

Dan*_*ams

2018 07-03

5
推荐指数

1
解决办法

3818
查看次数

为什么这个简单的 HTML CSS 文本描边不起作用？

我的最终目标是做出这样的效果： http: //codepen.io/yoksel/pen/XJbzrO（页面底部）。但我什至无法让这个简单的文本大纲发挥作用。

<!DOCTYPE html>

<html lang = "en-US">
  <head>
    <title> Test </title>
    <style>
       #title {
          color: blue;
          stroke: red;
          stroke-width: 2px;
       }
    </style>
  </head>

  <body>
    <h1 id="title">This is some text</h1>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

该解决方案必须适用于所有主要浏览器。我正在使用谷歌浏览器。如果无法通过这种方式完成描边，请不要建议使用阴影。我无法将阴影变成所需的效果。

html css outline stroke

Dan*_*ams

lucky-day

2
推荐指数

1
解决办法

4967
查看次数