不规则的文字环绕

m0_62766496

于 2024-11-28 21:05:14 发布

阅读量428

点赞数 3

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_62766496/article/details/144120685

版权

正常的文字都是正常围着元素笔直的环绕，话不多先看效果

想让文字围着左边图片圆形环绕，可以使用css中shape-outside属性改变改元素的周围元素的环绕方式，看下改变后的效果

接下来就是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            color: #fff;
            background-color: black;
            font-size: 30px;
        }
        img{
            width: 300px;
            height: 300px;
            float: left;
            border-radius: 50%;
            margin-right: 20px;
            shape-outside: circle(50% at 50% 50%);
        }
        .text{
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="../images/6.jpg" alt="">
        <p class="text">蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南省吉首市 [114]，中国内地男歌手、演员、原创音乐制作人 [1]、MV导演 [83]。
            2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长
            [2]；8月，发行首张EP《1》，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [3]；随后，他还发行原创单曲《Wait Wait
            Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》
            [6-7]；7月，发行首张数字专辑《YOUNG》 [85]；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。</p>
    </div>
</body>

</html>