CSS伪对象搞定首字下沉

最新推荐文章于 2021-06-19 03:08:05 发布

原创最新推荐文章于 2021-06-19 03:08:05 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #xhtml #html #border #float #web

CSS 专栏收录该内容

43 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

用过word，看过报纸的朋友，是不是对它们的首字下沉效果很感兴趣？

有的时候适当的在web中使用些首字下沉的效果，能为你的web增色不少。

通过伪对象:first-letter可以搞定这个效果：

［演示地址：http://www.doyoe.com/model/xhtmlcss/style/first.htm］

CSS部分：

.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>CSS Pseudo-Elements 搞定首字下沉</title>
</head>
<body>
<div class="dyfirst">
To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile.
</div>
</body>
</html>

以上的CSS只有.dyfirst:first-letter是用来做首字下沉效果的，其余的两个东东，只是为了让这个效果看起来更明显。同时也把:first-line的用法写了下，毕竟和:first-letter是“胞兄弟”，称不离砣嘛。

用CSS Pseudo-Elements做首字下沉的原理大致就是这样的，这只是一个演示，朋友们可以把效果做得更赞。

您可能感兴趣的与本文相关的镜像

ComfyUI

AI应用

ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等