浮雕字样

Question

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

对于这样的边框：

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

变成浮雕字体？

有没有办法制作浮雕文字而不是使用文字阴影？或者如果是用text-t shadow怎么把字母四面包裹起来呢？

shade and shine bordering

{edited：我的意思是，而不是 web-kit（测试后）没有显示准确的结果。在尝试使用 Web-kit 阴影工具时，有点失望，因为它没有像通常使用来自 CSS 的 "outset" 和 "inset" 边框样式那样完全覆盖字母。什么样的 CSS 脚本允许边框覆盖字母的所有参数（如偏移量），如图所示具有阴影和发光区域。}

Answer 1

听起来你想要text-shadow:

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

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

CodePen demo

Answer 2

你需要理解这一点我推荐这个网页，因为你可以了解更多关于它的信息，我留下了 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>

/

浮雕字样

Embrossed Letterign style

html

css

typography