CSS实现文字凹凸效果

使用两个div分别用来实现凹凸效果；
text-shadow语法
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow ：必需。垂直阴影的位置。允许负值。
blur：可选，模糊的距离。
color：可选，阴影的颜色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字效果</title><style>body {background-color: #ccc;}div {color: #ccc;font: 700 80px "微软雅黑";}div:first-child {text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style>
</head>
<body><div>曾经沧海难为水</div><div>除却巫山不是云 </div>
</body>
</html>

CSS实现文字凹凸效果相关推荐

CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
【每日一练】20—CSS实现文字动画效果
写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...
在html中写竖着的文字,css实现文字竖排效果示例代码
在word.excel中可以轻松的实现文字竖排的形式,但是在html页面中呢?现今我有了这种需要,我想要的效果如下: 复制代码代码如下: 这不是被美工嵌在的文字,而是通过div加上的,该当如何来实现此 ...
CSS实现文字闪动效果
作为一个上了年纪的老程序员,也不知道是不是写的少了,还是年纪到了,总是有很多的东西想不起来,虽然这种东西满大街都是,但是我还有想自己也有这样一篇文章,用来自查 html的部分 <div clas ...
css数字/文字滚动效果
效果: 原理利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果最 ...
如何实现文字动画效果
这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <html> ...

CSS实现文字凹凸效果

CSS实现文字凹凸效果相关推荐

最新文章

热门文章