1

我想知道 CSS 是否可以实现这种效果（http://igdaloff.com/mission.jpg）。我知道你可以弧整个字母，但很好奇是否有可能保持单词的顶部平坦而只弧形底部。Illustrator/Photoshop 中的效果称为上弧或下弧。

http://igdaloff.com/mission.jpg

非常感谢任何指导。

4

1 回答 1

0

不是真的，我唯一能想到的就是像下面的例子一样在每个字母上放一个类，但这不是最好的，但它工作了一半。目前没有办法只使用 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>

jsFiddle 版本

于 2012-10-09T02:23:38.213 回答