CSS文本样式

最新推荐文章于 2024-07-09 14:41:45 发布

晚生隆海

最新推荐文章于 2024-07-09 14:41:45 发布

阅读量167

点赞数

分类专栏： web前端 # CSS 文章标签： css css3

本文链接：https://blog.csdn.net/thlchina/article/details/115607174

版权

web前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

CSS文本样式

一、text-shadow文本阴影

一、text-shadow文本阴影

text-shadow: 30px 30px 5px red;
text-shadow: red 0.3em 0.3em 0.3em;
/*x偏移量、y偏移量、模糊半径、颜色(没有指定使用color属性值替代，位置可在最前可在最后)，可以多个参数添加多个阴影 */

文字燃烧效果

        span {
            font-size: 80px;
            font-weight: bold;
            text-shadow: 0 0 4px white, 0 -5px 4px #ff3, -2px -15px 11px #f80, 2px -25px 18px #f20;
        }

效果如下
效果图

        span {
            font-size: 80px;
            font-weight: bold;
            background-color: #ccc;
            color: #d1d1d1;
            text-shadow: 0 1px white, 0px -1px white, 1px 0px white, -1px 0 white;
        }

在这里插入图片描述


        span {
            font-size: 80px;
            font-weight: bold;
            background-color: #ccc;
            color: #d1d1d1;
            text-shadow: 1px 1px #333, -1px -1px white;
        }

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px 0 0 50px;

        }

        div {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci veritatis dolorum, accusantium
        assumenda
        perspiciatis sed quo ab eaque laborum perferendis consequuntur cumque natus, autem officia soluta ut?
        Similique,
        recusandae earum.
        Animi iste hic assumenda error est illum molestias, magnam perferendis dolores, quibusdam porro natus. Ipsam
        ullam quasi quae laboriosam alias nesciunt necessitatibus optio dicta suscipit nemo accusamus, voluptatibus
        perferendis distinctio?
        Suscipit nulla, ipsa assumenda ullam temporibus natus similique esse, accusamus quam nesciunt eaque quis
        voluptatibus? Dolorem omnis accusantium vitae? Nam iusto optio ipsum earum at voluptatibus rerum sint
        assumenda
        eos.
      </div>

</body>
</html>