CSS shape-outside 属性-之路教程

语法

shape-outside: none |<shape-box&gt>  | <basic-shape> | <image> | initial | inherit;

指定为“椭圆”的 shape-outside 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        shape-outside: ellipse(120px 200px at 40% 50%);
        clip-path: ellipse(120px 200px at 40% 50%);
        width: 300px;
        height: 500px;
        float: right;
        opacity: 0.6;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside 属性示例</h2>
    <div></div>
    <p>
      经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。

    </p>
  </body>
</html>

带有图像的 shape-outside 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      img {
        width: 250px;
        shape-outside: url("/bg.jpg");
      }      
      .left {
        float: left;
      }      
      .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside 属性示例</h2>
    <img src="/bg.jpg" alt="tree" class="left" />
    <img src="/bg.jpg" alt="tree" class="right" />
    <p>
      经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。

    </p>
  </body>
</html>

指定为“多边形”的 shape-outside 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        shape-outside: polygon(0 0, 0 200px, 300px 600px);
        clip-path: polygon(0 0, 0 200px, 300px 600px);
        width: 300px;
        height: 300px;
        float: left;
        opacity: 0.3;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside 属性示例</h2>
    <div></div>
    <p>
      经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。

    </p>
  </body>
</html>

CSS shape-outside 属性

shape-outside CSS 属性定义了内联内容环绕的形状。

默认情况下，内联内容软件包边距框，但 shape-outside 属性允许软件包复杂对象。

此属性将 <basic-shape> 和 URL 作为值。

目前， shape-outside 属性仅适用于浮动元素，但稍后可能会更改。
动画和过渡也可以操作此属性。

初始值	None
应用于	浮子。
继承	无效
可动画的	是的，如指定为 &lt:basic-shape>
版本	CSS1
DOM 语法	object.style.shapeouts =“Margin-Box”;

CSS shape-outside 属性值说明

值	描述
none	没有应用形状。元素的浮区区域不受影响。
<shape-box>	浮子区域根据浮子元件的边缘的形状确定。％26lt;形状箱％26gt;可以是四个值之一：边缘盒，边框，填充盒，内容框。包含在形状中的任何曲率由边界半径属性创建。
<basic-shape>	Float区域是基于以下值确定的：INSET（） - 用于矩形形状圈（） - 用于圆形形状椭圆形（） - 用于椭圆形状多边形（） - 用于具有三个或者更多个顶点的任何形状
<image>	基于指定％26LT的α通道提取和确定形状;图像％26gt;
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:46 来源：oir作者：oir

←CSS ::selection 伪元素

CSS speak 属性→

语法

指定为“椭圆”的 shape-outside 属性示例：

带有图像的 shape-outside 属性示例：

指定为“多边形”的 shape-outside 属性示例：

CSS shape-outside 属性值说明

目录