浮雕字体样式 [重复]答案

【问题标题】：Embrossed Letterign style [duplicate]浮雕字体样式 [重复]
【发布时间】：2016-09-26 10:33:57
【问题描述】：

我知道在所有情况下 CSS 中的边框属性都涵盖了，当然也包括 HTML 属性的边框。但我的主要问题是：

对于这样的边框：

.blah-border {
    border: #333 outset 5px;
}

变成浮雕字？

有没有办法制作浮雕字体而不是使用文本阴影？或者如果是使用 text-t shadow 的话，怎么能把它包在字母的四面八方呢？

shade and shine bordering

{已编辑：我的意思是，而不是 web-kit（测试后）没有显示准确的结果。在尝试使用 Web-kit 阴影工具时，有点失望，因为它没有像通常使用 CSS 中的“开始”和“插入”边界样式那样完全覆盖字母。什么样的 CSS 脚本可以让边框覆盖字母的所有参数（如偏移量），如图中描述的阴影和发光区域。}

【问题讨论】：

你想给文本加边框，而不仅仅是框？
认为它可能...
但专门针对开始/插入边框类型
如果您可以编辑（并发布）您希望示例文本看起来如何的图像，人们将能够为您提供更多帮助。如果我们不知道您在寻找什么，就很难判断是否有可能。

标签： html css typography

【解决方案1】：

听起来你想要text-shadow:

text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
color: [background color of the container]

基本上你设置一个 1px 的阴影偏移向上和左一个像素，然后另一个偏移量向下和右一个像素，颜色给你一个插入或开始效果。这在带纹理的背景上效果不佳，因为文本本身需要与背景颜色相同（transaprent 让阴影显示出来）。

CodePen demo

【讨论】：

这就是我所追求的，开始/插图的工作方式，我真的不知道它是一样的
酷。如果它对您有用，非常感谢您接受。
虽然不能提高你的答案。不过请帮忙！
您通过点击箭头下方的复选标记接受。我认为没有代表最低限度，因为这是您的问题。
我确实发现了一个问题。如果我想让它变得更厚，它会从左上角到右下角，而不是完整的。

【解决方案2】：

您需要了解这一点，我推荐此页面 web 以便您可以进一步了解它，我留下 1 个示例：

web page

示例如下：

.back {
 background-color: black; 
}
.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  font: normal 72px/normal "Passero One", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: -3px -5px 0 rgb(170,170,170) , -3px -4px 0 rgb(185,185,185) , -3px -3px 0 rgb(187,187,187) , -3px -2px 0 rgb(201,201,201) , -3px -1px 0 rgb(204,204,204) , 3px 1px 0 rgb(204,204,204) , 3px 2px 0 rgb(201,201,201) , 3px 3px 0 rgb(187,187,187) , 3px 4px 0 rgb(185,185,185) , 3px 5px 0 rgb(170,170,170) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.enjoy-css:hover {
  color: rgba(169,214,169,1);
  text-shadow: -3px -5px 0 rgba(255,255,255,1) , -1px -3px 0 rgba(255,255,255,1) , -2px -3px 0 rgba(255,255,255,1) , -3px -2px 0 rgba(255,255,255,1) , -3px -1px 0 rgba(255,255,255,1) , 3px 1px 0 rgba(255,255,255,1) , 3px 2px 0 rgba(255,255,255,1) , 3px 3px 0 rgba(255,255,255,1) , 3px 4px 0 rgba(255,255,255,1) , 3px 5px 0 rgba(255,255,255,1) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

<body class="back">
<div class="enjoy-css">3D effect</div>
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
</body>

【讨论】：

非常漂亮的 3D 视觉效果，看起来很棒，但我仍在寻找一个包围所有边的边框，就像一个包围所有边的边框，希望我能找到它包围所有边的字母。
好吧，我尝试不同的东西并不是预期的结果，因为需要添加更多的阴影和颜色只是在一个好的 css 编辑器中改变它，这很复杂。
确实如此，但我承认。看起来还是很酷的！ :)