浮雕字体样式 [重复]
Posted
技术标签:
【中文标题】浮雕字体样式 [重复]【英文标题】：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 脚本可以让边框覆盖字母的所有参数（如偏移量），如图中描述的阴影和发光区域。
【问题讨论】：
你想给文本加边框，而不仅仅是框？ 认为它可能... 但专门针对开始/插入边框类型 如果您可以编辑（并发布）您希望示例文本看起来如何的图像，人们将能够为您提供更多帮助。如果我们不知道您在寻找什么，就很难判断是否有可能。 【参考方案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 编辑器中改变它，这很复杂。 确实如此，但我承认。看起来还是很酷的！ :)以上是关于浮雕字体样式 [重复]的主要内容，如果未能解决你的问题，请参考以下文章