如何用CSS制作首字下沉

html-css032

如何用CSS制作首字下沉,第1张

段落首字下沉 单纯从前端角度,可以实现的方法

1、before伪元素实现

2、使用标签控制

段落首字下沉 方法分析

第一种方法果断舍弃,原因在于,数据明显是从后台传递的,那么此时我们不可能确定后台会传递什么数据。

具体内容请详见:CSS样式 | 段落首字下沉

css让字体下沉的方法:首先创建一个HTML示例文件;然后使用伪元素“::first-letter”选中一段文本的首字;接着使用“font-size”属性设置首字大小;最后通过float属性实现下沉效果即可。

CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。

当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。

我们可以使用伪元素来实现这种效果:

首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。

看上去还是这么回事。

通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:

通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。

caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭

给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:

我们可以修改滚动条的样式,滚动条变得更加炫酷。

如果你不想让用户选中页面上的文字,就可以用这个特性了。

很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。