css3 shape-out

来源：互联网发布：淘宝旅行官网编辑：程序博客网时间：2024/06/05 14:55

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"/>

这里写图片描述

0 0