CSS 学习笔记 - 形状/环绕

今天药忘吃喽~ 2022-12-03 13:15 178阅读 0赞

### CSS 学习笔记 - 形状/环绕 ###

*  形状
 *   *  clip-source
     *  basic-shape
     *  geometry-box 这个还没看懂先记一下
     *  形状效果
 *  环绕
 *   *  shape-margin
     *  文字环绕效果
 *  参考资料

# 形状 #

[clip-path][] 矢量形状，显示区域。  
语法:`none | <clip-source> | [ <basic-shape> || <geometry-box> ]`

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>不创建的剪切路径</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">clip-source</a></td> 
   <td>用 <code>url(#myShape)</code>方式引用<code>svg</code>中定义形状的<code>id</code>： <code>myShape</code></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">basic-shape</a></td> 
   <td>css支持的基础形状</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">geometry-box</a></td> 
   <td>为&lt;basic-shape&gt;定义边界盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。</td> 
  </tr> 
 </tbody> 
</table>

## clip-source ##

使用 `svg` 形状。

.svg{ 
      float:right;
      background-color:#0f0;
      width: 100px;
      height: 100px;
      clip-path: url(#myShape);
    }

## basic-shape ##

[basic-shape][]是一种表现基础图形的CSS数据类型，作用于[clip-path][] 与 [shape-outside][] 属性中。

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>功能</th> 
   <th align="left">语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>inset()</td> 
   <td>矩形</td> 
   <td align="left">inset( &lt;<code>四角坐标支持简写</code>&gt; [round &lt;<code>四圆角值支持简写</code>&gt;]? )<br>例：inset(10% 10px);</td> 
  </tr> 
  <tr> 
   <td>circle()</td> 
   <td>圆形</td> 
   <td align="left">circle( [&lt;<code>半径</code>&gt;]? [at &lt;<code>圆心位置 position（缺省是盒子中心）</code>&gt;]? )<br>例：circle(50% at center left);</td> 
  </tr> 
  <tr> 
   <td>ellipse()</td> 
   <td>椭圆</td> 
   <td align="left">ellipse( [&lt;<code>x轴半径, y轴半径。支持简写</code>&gt;]? [at &lt;<code>圆心位置 position（缺省是盒子中心）</code>&gt;]? )<br>例：clip-path: ellipse(50% 25% at 50% 25%);</td> 
  </tr> 
  <tr> 
   <td>polygon()</td> 
   <td>多边形</td> 
   <td align="left">polygon( [&lt;<code>填充规则 fill-rule</code>&gt;,]? [&lt;<code>点1x,y</code>&gt; &lt;<code>点2x,y</code>&gt; … &lt;<code>点nx,y</code>&gt;]# ) <br>例：clip-path: polygon(50% 0, 80% 50%, 50% 100%, 20% 50%);</td> 
  </tr> 
 </tbody> 
</table>

## geometry-box 这个还没看懂先记一下 ##

如果同 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个：

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-box</td> 
   <td>使用 margin-box 作为引用框。</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>使用 padding box 作为引用框。</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>使用 border box 作为引用框。</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>使用 content box 作为引用框。</td> 
  </tr> 
  <tr> 
   <td>fill-box</td> 
   <td>利用对象边界框作为引用框。</td> 
  </tr> 
  <tr> 
   <td>stroke-box</td> 
   <td>使用笔触边界框（stroke bounding box）作为引用框</td> 
  </tr> 
  <tr> 
   <td>view-box</td> 
   <td>使用最近的 SVG 视口（viewport）作为引用框</td> 
  </tr> 
 </tbody> 
</table>

## 形状效果 ##

[https://codepen.io/jerryjin/pen/oNxyNxO][https_codepen.io_jerryjin_pen_oNxyNxO]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]

# 环绕 #

[shape-outside][] 定义外边，控制文字环绕。支持带透明的PNG。  
语法：`none | <shape-box> || <basic-shape> | <image>`

*  为了让文字环绕，需要先将形状设置为[浮动][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td align="left">无环绕效果</td> 
  </tr> 
  <tr> 
   <td>&lt;image&gt;</td> 
   <td align="left">根据图片的非透明区域计算边界。类似于<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-image-threshold" rel="nofollow">shape-image-threshold</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">&lt;basic-shape&gt;</a></td> 
   <td align="left">基于给定的<code>基础图形</code>计算浮动区域。如果存在 <code>&lt;shape-box&gt;</code>那么会定义边界盒，默认方式<code>margin-box</code> 。</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">&lt;shape-box&gt;</a></td> 
   <td align="left">根据浮动元素的边缘形状计算出浮动的区域。包括了由 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius" rel="nofollow">border-radius</a> 属性制造出来的圆角。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th><code>&lt;shape-box&gt;</code>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-box</td> 
   <td>外边距环绕</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>内边距环绕</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>边线环绕</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>内容环绕</td> 
  </tr> 
 </tbody> 
</table>

## shape-margin ##

[shape-margin][] 用于设定由`shape-outside`创建的 CSS 形状的外边距。

*  支持`长度(数值+单位)`or`百分比`
 *  不支持负数

## 文字环绕效果 ##

[https://codepen.io/jerryjin/pen/yLOEKOX][https_codepen.io_jerryjin_pen_yLOEKOX]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]

# 参考资料 #

[MDN：CSS属性值定义语法][MDN_CSS]  
[MDN：CSS\_Shapes 形状][MDN_CSS_Shapes]  
[MDN：CSS\_basic-shape 基础形状][basic-shape]  
[MDN：CSS\_Masking 遮罩][MDN_CSS_Masking]  
[在剪辑和遮罩中的形状-以及如何使用它们][-]

[clip-path]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
[basic-shape]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape
[shape-outside]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
[position]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position_value
[filling rule]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
[https_codepen.io_jerryjin_pen_oNxyNxO]: https://codepen.io/jerryjin/pen/oNxyNxO
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/21993ddde3a24a3da810bd1b324cf98f.png
[Link 1]: https://blog.csdn.net/jx520/article/details/108565057
[shape-margin]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-margin
[https_codepen.io_jerryjin_pen_yLOEKOX]: https://codepen.io/jerryjin/pen/yLOEKOX
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/45ae5c6a6efe42beb9ce541d1e364dae.png
[MDN_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax
[MDN_CSS_Shapes]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Shapes
[MDN_CSS_Masking]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Masking
[-]: https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/