css3 shape-out

最新推荐文章于 2023-06-22 11:56:05 发布

心鑫

最新推荐文章于 2023-06-22 11:56:05 发布

阅读量718

点赞数

文章标签： css

本文链接：https://blog.csdn.net/proud2005/article/details/46728383

版权

shape-out 文字围绕图形矩形设计的限制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title></title>
</head>
<style type="text/css">
    .lapland {
        float: left;
        shape-outside: inset(10px round 10px);
        /*shape-outside: inset(1% round 45%);*/
        /*shape-outside: circle();*/

        /*shape-outside: url("11.png") ;*/
    }
    p{
        font-size: 30px;
    }
</style>
<body>
<img src="1.png" class="lapland"/>

<p>They can bend bows most easily that the most powerful Swedes or Norwegianscould not bend at all. They dress,as you
    see, altogether in skins or coarse wool. The w</p>
</body>
</html>

shape-outside: inset(10px round 10px);
这里写图片描述

/shape-outside: inset(1% round 45%);/

这里写图片描述

/*shape-outside: circle();*/

这里写图片描述

/shape-outside: url(“11.png”) ;/ 注意透明背景的地方会填充文字
shape-image-threshold 设置透明度阀值，小于的会填充文字
这里写图片描述

通过多边形设置借助chrome 的 css shape editer 插件
安装完成后在element 标签最后可看shape
这里写图片描述

使用模型

    .lapland {
        float: left;
       border-radius: 50%;
        border: 10px dotted red;
        shape-outside: margin-box;
        /*shape-outside: padding-box;*/

    }
    p{
        font-size: 30px;
    }
</style>
<body>
<img src="1.png" class="lapland"/>