css中凹凸字笔记

最新推荐文章于 2024-03-30 01:27:24 发布

_qz

最新推荐文章于 2024-03-30 01:27:24 发布

阅读量324

点赞数

文章标签： css入门凹凸字体

本文链接：https://blog.csdn.net/m0_45210226/article/details/102687991

版权

#css中的凹凸字体笔记
先放一下效果图片

这里为了显示效果就将背景图片换成了灰色
凹凸字体的效果主要是用了text-shadow的特点
仔细观察，可以发现突起的文字它的下阴影是黑色的（#000），上阴影是白色（#fff）的；凹陷的文字正好和突起相反，上阴影为黑色，下阴影为白色。
下面说text-shadow：text-shadow: 1px 1px 2px #000,-1px -1px 2px #fff;
text-shadow有四个元素，并且可以多次相加。
第一个元素为水平位置，第二个为竖直位置，第三个为模糊距离，第四个为阴影颜色。
水平位置就是阴影在水平位置的宽度，竖直位置同理。

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: normal 700 80px "微软雅黑"
        }
        div:first-child {
            text-shadow: 1px 1px 2px #000,-1px -1px 2px #fff;
        }
        div:last-child {
            text-shadow: -1px -1px 2px #000,1px 1px 2px #fff;
        }
    </style>
</head>
<body>
<div>突起的文字</div>
<div>凹陷的文字</div>
</body>
</html>`

这是一个简单的例子，新手大佬勿喷，首先第一步是将整体背景设置为#ccc，即灰色，并且将div块元素设置为灰色，并且调整字体。此时可以发现现在在浏览器中打开是不显示字体的，接着运用结构伪类选择器将div的first-child和last-child设置相应的文字阴影。结束。

巩固一下字体的知识：font的综合字体样式设置

font: font-style font-weight font-size font-family 
#元素中间用空格隔开
前两个可以默认省略，但必须保留font-size和font-family

_qz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中凹凸字笔记

#css中的凹凸字体笔记先放一下效果图片这里为了显示效果就将背景图片换成了灰色凹凸字体的效果主要是用了text-shadow的特点仔细观察，可以发现突起的文字它的下阴影是黑色的（#000），上阴影是白色（#fff）的；凹陷的文字正好和突起相反，上阴影为黑色，下阴影为白色。下面说text-shadow：text-shadow: 1px 1px 2px #000,-1px -1px 2px...
复制链接

扫一扫