CSS文本效果、2D转换_css 2d字体-CSDN博客

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/125939545

文本效果

文本阴影

text-shadow:水平方向垂直方向模糊度

<!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>Document</title>
    <style type="text/css">
        p {
            text-shadow: 5px 5px 5px;
        }
    </style>
</head>

<body>
    <p>文本阴影</p>
</body>

</html>

文本溢出 ——改为省略号

white-space：nowrap ——不换行

overflow：hidden ——溢出隐藏

text-overflow：ellipsis ——改为省略号

-webkit-line-clamp: ——显示的行数

代码：

<!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>Document</title>
    <style type="text/css">
        p {
            width: 500px;
            height: 500px;
            border: 1px solid blueviolet;
            /* 不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 改成省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <p>啊发大师傅打发第三个D各地政府和施工方坤坤撒旦发生的故事大纲VS的v士大夫SD发SFSD发SD发SD发S分别发给他和规范化困困困困困困困困困困坤坤撒旦发生官方电话发给发给你</p>
</body>

</html>

2D转换

translate()方法

translate()方法从其当前位置移动元素（根据为x轴和y轴指定的参数）

<!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>Document</title>
    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: blueviolet;
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <div>
        <div class="aa"></div>
    </div>

</body>

</html>

rotate()方法

rotate()方法根据给定的角度顺时针或逆时针旋转元素

<!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>Document</title>
    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: blueviolet;
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <div>
        <div class="aa"></div>
    </div>

</body>

</html>

<!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>Document</title>
    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: blueviolet;
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <div>
        <div class="aa"></div>
    </div>

</body>

</html>

scale()方法

scale()方法增加或减少元素的大小（根据给定的宽度和高度参数）

skewX()方法

skewX()方法使元素沿x轴倾斜给定角度

<!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>Document</title>
    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: blueviolet;
            transform: skewX(-45deg);
        }
    </style>
</head>

<body>
    <div>
        <div class="aa"></div>
    </div>

</body>

</html>

skewY()方法

skewY()方法使元素沿y轴倾斜给定角度

<!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>Document</title>
    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 200px;
            background-color: blueviolet;
            transform: skewY(-45deg);
        }
    </style>
</head>

<body>
    <div>
        <div class="aa"></div>
    </div>

</body>

</html>