Question

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

对于这样的边界：

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

变成浮雕刻字？

有没有办法制作浮雕字母而不是使用文字阴影？或者，如果是使用tex-t阴影，它怎么能被包裹在信的所有边上？

shade and shine bordering

{编辑：我的意思是，而不是网络工具包（测试后）没有显示准确的结果。在尝试使用Web-kit阴影工具时，有点失望，因为它完全没有覆盖字体，就像它通常用来自CSS的角色“开头”和“插入”边框样式一样。什么样的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

你需要明白这一点我推荐这个页面网页，你可以更多地了解它，我留下一个例子：

web page

这是一个例子：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

/

大写的Letterign风格

2 个答案: