CSS3中的文字阴影和凹凸文字！！！

最新推荐文章于 2021-06-18 14:43:42 发布

帅帅邬同学

最新推荐文章于 2021-06-18 14:43:42 发布

阅读量250

点赞数 1

分类专栏： CSS 学习笔记文章标签： css css3 html html5 前端

本文链接：https://blog.csdn.net/weixin_44586544/article/details/105724984

版权

学习笔记同时被 2 个专栏收录

111 篇文章 0 订阅

订阅专栏

CSS

18 篇文章 0 订阅

订阅专栏

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

文字阴影(CSS3)

前两项是必须写的。后两项可以选写。

文字阴影(CSS3)

凹凸文字

<head>
     <meta charset="utf-8">
     <style>
       body {
       	background-color: #ccc;
       	}
		div {
		color: #ccc;
		font: 700 80px "微软雅黑";
		}
		div:first-child {
		/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
		text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
		}
		div:last-child {
		/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
		text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
		}
      </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

效果图：
凹凸文字

帅帅邬同学

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的文字阴影和凹凸文字！！！

文字阴影(CSS3)以后我们可以给我们的文字添加阴影效果了 Shadow 影子text-shadow:水平位置垂直位置模糊距离阴影颜色;前两项是必须写的。后两项可以选写。凹凸文字<head> <meta charset="utf-8"> <style> body { backgr...
复制链接

扫一扫