首页W3C技术头条文字阴影(凹凸)css实现

文字阴影(凹凸)css实现

w3cschool小编 2021-02-23 14:52:41 浏览数 (541)
反馈

文字阴影(凹凸)效果:

微信截图_20210223145110

代码内容

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>w3cschool</title>

<style type="text/css">

body{

background-color: #ccc;

}

div{

font: 700 80px "微软雅黑";

color: #ccc;

}

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>

</html>

推荐好课:CSS微课HTML+CSS进阶实战


0 人点赞

相关课程 更多»

{{ relateCourse.bookname }}

{{ relateCourse.description }}

{{ relateCourse.watch_count }} 人参与

立即学习
相关文章 更多»
{{ relateArticle.title }} {{ relateArticle.postdate }}

最新文章

热门文章

更多»