带有透视

Question

我有以下html结构，我使用下划线和阴影来设置我的标题样式。

＆＃13;

＆＃13;

.title {
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0px;
    text-shadow: 2px 2px #32c8ff;
    text-decoration: underline;
    text-underline-position: under;
}

＆＃13;

<div class="container">
  <div class="content">
    <div class="title">MY TITLE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试使用以下css应用透视效果

＆＃13;

＆＃13;

.container {
    -webkit-perspective: 150px;
    perspective: 150px;
}

.content {
    -webkit-transform: rotateX(25deg);
    transform: rotateX(25deg);
}

＆＃13;

<div class="container">
  <div class="content">
    <div class="title">MY TITLE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，它在文本上工作正常但在下划线上不显示阴影，并且忽略与文本的距离（text-underline-position：under;）。

使用透视图时，有没有办法显示阴影并保持下划线与文本的正确距离？

Answer 1

您可以使用伪元素before模拟下划线：

.title {
    display: inline-block;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0px;
    position: relative;
    text-shadow: 2px 2px #32c8ff;
    text-decoration: none;
}

.title::before {
    border-bottom: 2px solid #000;
    bottom: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 2px 2px #32c8ff;
}

See the example here

Answer 2

检查一下： https://jsfiddle.net/zzhn5gh7/

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 0 auto 60px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
}

.title {
  width: 100%;
  height: 100%;
  position: absolute;
  background: green;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0px;
  text-shadow: 2px 2px #32c8ff;
  text-decoration: underline;
  text-underline-position: under;
}

#rotate-x .title {
  -webkit-transform: rotateX( 45deg);
  -moz-transform: rotateX( 45deg);
  -o-transform: rotateX( 45deg);
  transform: rotateX( 45deg);
}

<div id="rotate-x" class="container">
  <div class="title">MY TITLE
</div>

Answer 3

另一种可能性：Fiddle

＆＃13;

＆＃13;

.title, .subtitle {
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0px;
    text-shadow: 2px 2px #32c8ff;
    text-align: center;
}
.title {
    border-bottom: 2px solid;
    box-shadow: 2px 2px #32c8ff;
}
.container {
    display: table-cell;
    -webkit-transform: rotateX(45deg);
    transform: rotateX(25deg);
}
.content {
    -webkit-transform: rotateX(45deg);
    transform: rotateX(25deg);
}

＆＃13;

<div class="container">
  <div class="content">
    <div class="title">GREENPEACE</div>
    <div class="subtitle">THE SURFER</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

对我来说，正确的解决方案如下：

.title {
    display: inline-block;
    position: relative;
    font-size: 28px;
    line-height: 2.5;
    letter-spacing: 0px;
    text-shadow: 2px 2px #32c8ff;
    text-decoration: none;
}
.title::before {
    border-bottom: 4px solid #ffffff;
    bottom: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 2px 2px #32c8ff;
    margin: 11px 0px;
}
.subtitle {
    font-size: 28px;
    line-height: 0.7;
    letter-spacing: 0px;
    text-shadow: 2px 2px #32c8ff;
}