不规则文字环绕

@秋野

已于 2024-03-13 20:19:14 修改

阅读量353

点赞数 11

分类专栏：前端入门效果文章标签： html5

于 2024-03-13 20:18:16 首次发布

本文链接：https://blog.csdn.net/BGMcat/article/details/136690311

版权

前端入门效果专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浮动元素添加 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>
        img{
            width:200px;
            height:100px;
            float: left;
            border-radius: 50%;
            shape-outside: ellipse(at 50% 50%);   /*设置椭圆边界，默认方型*/
        }
    </style>
</head>
<bod>
    <img src="./FLAMING MOUNTAIN.JPG">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro consequuntur architecto nobis harum nemo sunt officia adipisci, quam ex qui totam, provident ab dolor veniam suscipit, corporis tempora perferendis esse!
    Deleniti, earum placeat sed commodi architecto maxime aspernatur inventore enim, corporis quae amet nesciunt ea vitae quidem molestias saepe voluptatibus labore quisquam praesentium maiores dolorum libero mollitia repudiandae! Autem, alias.
   e itaque perspiciatis consequatur qui dolor? Sunt perferendis quis eaque quo suscipit dignissimos in corporis, atque, quam eos vero.
    Inventore, doloribus nam. Dignissimos sequi dolore provident totam aliquam sit, magni similique quas. Dolore obcaecati quibusdam possimus quisquam nam fugit eum molestiae, voluptatibus asperiores nostrum odio excepturi assumenda eaque? Nulla.
    Sunt odio iure sed sint cum eveniet architecto, corporis ex maxime rerum neque magni ipsum fuga commodi, ratione, quae nesciunt minus facere obcaecati consequatur itaque explicabo rem? Hic, eius voluptatem.
    Veritatis, repellendus. Distinctio, veniam necessitatibus alias fugiat ad itaque ea repudiandae quam nostrum obcaecati perferendis ratione rerum voluptate quis deserunt eveniet ducimus animi illum accusantium voluptatem nobis eos veritatis dicta.</p>
</body>
</html>