css3字体可以模糊吗?

css3可以让字体模糊吗?如何模糊字体?下面本篇文章给大家介绍一下使用CSS3模糊字体的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

我们可以使用CSS3 filter属性来实现字体模糊效果;语法:filter: blur(px);

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

其中属性值blur(px)可以给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .blur {
				-webkit-filter: blur(1px); /* Chrome, Opera */
				-moz-filter: blur(1px);
				-ms-filter: blur(1px);
				filter: blur(1px);
			}
        </style>
    </head>

    <body>
    	<p>正常字体</p>
        <p class="blur">模糊的字体</p>
    </body>

</html>

效果图:

1.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css3字体可以模糊吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏