C3之text属性的补充

最新推荐文章于 2024-05-23 21:02:02 发布

VIP文章 23号婷儿

最新推荐文章于 2024-05-23 21:02:02 发布

阅读量183

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_46179838/article/details/109765555

版权

text属性

一、text-shadow 文本阴影

1、书写格式：水平偏移量垂直偏移量模糊值阴影颜色；

2、浮雕和镂刻效果的实现

可能浮雕和镂刻的效果感觉相差不太大，但是日常生活中还是会用的，知道怎么去用就可以啦

应用一：浮雕效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-shadow练习</title>
    <style>
        *{
    
            margin:0px;
            padding:0px;
        }
        body{
    
            background-color: #0ff;
        }
        div{
    
            font-size:80px;
            font-weight: bold;
            position:absolute;
            left:150px;
            top:50px;
            color:#ddd;
            width:700px;
            height:100px;

            text-shadow:1px 1px #000,
                        -1px -1px #fff;
        }
    </style>
</head>
<body>
    <div>TEXT SHADOW</div>
</body>
</html>

效果图在这里插入图片描述

应用二：镂刻效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-shadow练习</title>
    <style>
        *{
    
            margin:0px;
            padding:0px;
        }
        body{
    
            background-color: #0ff;
        }
        div{
    
            font-size:80px;
            font-weight: bold;
            position:absolute;
            left:150px;
            top:50px;
            color:#ddd;
            width:700px;
            height:100px;

            text-shadow:-1px -1px #000,
                        1px 1px #fff;<