温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何用css3给字体添加立体效果

发布时间:2021-08-30 17:28:20 来源:亿速云 阅读:319 作者:chen 栏目:web开发

这篇文章主要讲解了“如何用css3给字体添加立体效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用css3给字体添加立体效果”吧!


字体添加立体效果图如下

如何用css3给字体添加立体效果

1、新建一个html文件,首先写div标签输入写contenteditable属性规定是否允许用户编辑内容,可以支持IE,不用再为兼容问题。<div contenteditable="true">可以编辑里面的内容</div> ,再来class是类选择器,可以纯静态在网页中控制字体颜色。

html代码示例

<div contenteditable="true" class="text eff">字体特效</div>

2、通过给css全局的设置,写使用head标签之间加入<style type="text/css">串代码然后在style标签中输入divbackground-color属性设置元素的背景颜色。

代码示例

body{
  background-color: #456;
}

代码效果

如何用css3给字体添加立体效果

3、效果出来了,只是给背景添加颜色,接着给字体特效通过在style标签中输入字体、字体尺寸、水平对齐方式、粗细、行间距、字体大小、顶部、底部、左侧和右侧属性定位。

代码示例

.text {
    font-family:"微软雅黑", "Dosis", sans-serif;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    line-height:200px;
    text-transform:uppercase;
    position: relative;
}

代码效果

如何用css3给字体添加立体效果

4、效果出来了,只是给字体变大也加粗并居中,接下来给字体特通过在style标签中输入背景颜色、阴影。

利用text-shadow属性来生成文本阴影效果。它的使用方法很简单,text-shadow:0px 0px 0px #000X轴,Y轴,模糊程度(不可是负值),阴影颜色。

代码示例

.eff{
    background-color: #333;
    color:#fefefe;
    text-shadow:
    0px 1px 0px #c0c0c0,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, 0.6);
}

代码效果

如何用css3给字体添加立体效果

通过修改参数就可以实现多种特效

感谢各位的阅读,以上就是“如何用css3给字体添加立体效果”的内容了,经过本文的学习后,相信大家对如何用css3给字体添加立体效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI