使用CSS降低活动类型上的弧形效果_Css_Text_Typography_Warp

使用CSS降低活动类型上的弧形效果

css text

使用CSS降低活动类型上的弧形效果,css,text,typography,warp,Css,Text,Typography,Warp,我想知道这种影响http://igdaloff.com/mission.jpg 使用CSS是可能的。我知道你可以画出整个字母的弧线，但好奇的是，是否有可能让单词的顶部保持平坦，而只画出底部的弧线。Illustrator/Photoshop中的效果称为上弧或下弧非常感谢您的指导。不是真的，我唯一能想到的是在每个字母上加一个类，如下面的示例，但它不是最好的，但它起到了一半的作用。目前没有办法仅仅使用css来弯曲文本，因为它是严格的矩形，所以您实际上只能处理文本的矩形属性 <html>

我想知道这种影响http://igdaloff.com/mission.jpg 使用CSS是可能的。我知道你可以画出整个字母的弧线，但好奇的是，是否有可能让单词的顶部保持平坦，而只画出底部的弧线。Illustrator/Photoshop中的效果称为上弧或下弧

非常感谢您的指导。

不是真的，我唯一能想到的是在每个字母上加一个类，如下面的示例，但它不是最好的，但它起到了一半的作用。目前没有办法仅仅使用css来弯曲文本，因为它是严格的矩形，所以您实际上只能处理文本的矩形属性

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
.level1 {margin-top:0px !important; position:absolute;}
.level2 {margin-top:-2px; margin-left:10px; position:absolute;}
.level3 {margin-top:-4px; margin-left:20px; position:absolute;}
.level4 {margin-top:-3px; margin-left:30px; position:absolute;}
.level5 {margin-top:-2px; margin-left:40px; position:absolute;}
.level6 {margin-top:0px; margin-left:50px; position:absolute;}
</style>
</head>
<body>
<p><b class="level1">T</b><b class="level2">h</b><b class="level3">e</b> 
<b class="level4">e</b><b class="level5">n</b><b class="level6">d.</b></p>
 </body>
 </html>

@贝特兰·马伦，太糟糕了。哈我老板的设计，不是我的。显然是印刷品，而不是网页设计师感谢给它一个“自学成才的程序员”的机会。不是我想要的那种效果。现在看来这是行不通的。