css3基础 text-shadow 凹凸文字 简单示例
2018-02-11 09:37
344 查看
礼悟:
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
代码
效果
![](https://images2017.cnblogs.com/blog/1161442/201802/1161442-20180211093700966-470997662.png)
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
ide:visual studio 2017
browser:Chrome
os:win7
browser:Chrome
os:win7
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="给最苦 https://www.cnblogs.com/jizuiku https://github.com/GratefulHeartCoder"/> <title></title> <style type="text/css"> div { width: 300px; height: 120px; background-color: gray; color: grey; } h1 { font-size: 80px; } .sunken { text-shadow: 1px 1px 1px white, -1px -1px 1px black; } .convex { /* 这个很厉害呀,多学科交叉。 你可是用鼠标选中文字看一看,会有文字动起来的错觉。 那么点击超链接时,出现...文字凹下去的效果,合适吗? */ text-shadow: 1px 1px 1px black, -1px -1px 1px white; } </style> </head> <body> <div> <h1 class="convex">道德经</h1> </div> <div> <h1 class="sunken">金刚经</h1> </div> </body> </html>
效果
![](https://images2017.cnblogs.com/blog/1161442/201802/1161442-20180211093700966-470997662.png)
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
相关文章推荐
- css3基础 text-shadow 文字阴影 简单示例
- css3基础 color:rgba 文字颜色半透明 简单示例
- 浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect
- css3基础 rgba 背景半透明 简单示例
- css3基础 ::before ::after 添加元素 简单示例
- CSS3的文字阴影—text-shadow
- CSS3的文字阴影—text-shadow
- CSS3文字与字体:text-overflow 与 word-wrap、@font-face、文本阴影text-shadow
- css3基础 :nth-last-child(3n) 简单示例
- 利用css3的text-shadow属性实现文字阴影乳白效果
- CSS3 利用 text-shadow 实现文字描边效果
- CSS3 参考指南:文字阴影text-shadow
- 利用css3的text-shadow属性实现文字阴影乳白效果
- 了解CSS3的文字阴影效果 - Text Shadow effects
- css3 ——text-shadow使用阴影叠加出的燃烧的文字特效
- css3基础 :nth-child(odd奇/even偶) 简单示例
- CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
- 4000 CSS3 的text-shadow实现立体文字和燃烧文字
- CSS3的文字阴影—text-shadow
- css基础 text-indent 段落的首行缩进两个字符 简单示例