十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了“如何用css3给字体添加立体效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用css3给字体添加立体效果”吧!
创新互联公司制作网站网页找三站合一网站制作公司,专注于网页设计,网站制作、做网站,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为超过千家服务,创新互联公司网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!
字体添加立体效果图如下
1、新建一个html
文件,首先写div
标签输入写contenteditable
属性规定是否允许用户编辑内容,可以支持IE,不用再为兼容问题。
,再来class
是类选择器,可以纯静态在网页中控制字体颜色。
html代码示例
字体特效
2、通过给css
全局的设置,写使用head
标签之间加入串代码然后在
style
标签中输入div
代background-color
属性设置元素的背景颜色。
代码示例
body{ background-color: #456; }
代码效果
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; }
代码效果
4、效果出来了,只是给字体变大也加粗并居中,接下来给字体特通过在style
标签中输入背景颜色、阴影。
利用text-shadow
属性来生成文本阴影效果。它的使用方法很简单,text-shadow:0px 0px 0px #000
,X
轴,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给字体添加立体效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!