文本效果阴影 2D转换_direct2d 文字阴影-优快云博客

本文链接：https://blog.youkuaiyun.com/red_HTML/article/details/125926054

本文介绍了CSS中的一些关键样式技巧，包括文本阴影的设置，使用伪类创建元素阴影，处理文本溢出的方法，以及2D转换如translate、rotate和scale的应用。示例代码详细展示了如何实现这些效果，帮助理解CSS在网页设计中的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本阴影

text-shadow 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">
        div p {
            text-shadow: 5px 5px 5px red;
        }
    </style>
</head>

<body>
    <div>
        <p>今天下雨，黄色预警</p>
    </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">
        div {
            width: 300px;
            /* border: 3px solid red; */
            position: relative;
        }
        
        div::after {
            content: " ";
            width: 200px;
            height: 10px;
            position: absolute;
            top: 47%;
            left: 50%;
            z-index: 2;
            box-shadow: -100px 150px 10px red;
        }
        
        div img {
            position: relative;
            z-index: 3;
        }
    </style>
</head>

<body>
    <div>
        <img src="img/22.jpg" alt="">
    </div>
</body>

</html>

伪类阴影可修改大小宽高

文本溢出

white-space:nowrap 不换行

overflow:hidden: 溢出隐藏

text-overflow:ellipsis 溢出文本转化那位三个点

-webkit-line-clamp: 4 控制几行

<!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>
</head>
<style>
    div p {
        width: 100px;
        height: 200px;
        border: 1px solid red;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<body>
    <div>
        <p>今天下雨，黄色预警，2022/7/22</p>
    </div>
</body>

</html>

2d转换

translate:translate(50px,100px); (x轴，y轴)

translate:rotate

translste:scalei

<!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">
        .box {
            width: 300px;
            height: 200px;
            background: red;
            transform: translate(100px);
            /* 水平移动100px */
            transition: 3s;
            /* 规定他旋转的时间 */
        }
        
        .box:hover {
            /* 通过点击事件来旋转180度    两个事件同时加载会被覆盖*/
            transform: rotate(180deg);
            /* 缩放到0.3 */
            /* transform: scale(0.3); */
        }
        
        @keyframes identifier {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>