发布于 由admin

CSS `CSS Shapes` (`shape-outside`, `shape-margin`)：文本环绕自定义形状

各位观众，掌声在哪里！欢迎来到今天的CSS魔法课堂，我是你们的老朋友，bug制造大师——但这次保证不制造bug，只教你如何用CSS让文字乖乖听话，围着你的奇形怪状“跳舞”。今天的主题是：CSS Shapes，让文字“环绕”你的想象力！

开场白：告别死板的矩形世界

你有没有想过，为什么网页上的文字总是那么规规矩矩地挤在矩形框里？难道它们就不能有点个性，像小鸟一样自由地环绕着图片飞翔吗？答案是：可以！只要你有CSS Shapes这门“独门秘籍”。

CSS Shapes 是一组CSS属性，允许你定义一个非矩形的形状，让行内元素（比如文字）环绕它。想象一下，文字像藤蔓一样沿着一个圆形、椭圆形，甚至是自定义的复杂图形生长，是不是很酷？

第一章：Shape-Outside：定义你的“环绕轨道”

shape-outside 是CSS Shapes的核心属性，它定义了文字环绕的形状。它的取值有很多种，我们一个个来看：

  • none： 这是默认值，文字就像没看到形状一样，直接穿过去，相当于没用CSS Shapes。

    .element {
  width: 200px;
  height: 200px;
  float: left; /* 必须要float! */
  background-color: lightblue;
  shape-outside: none; /* 默认值，文字会穿过去 */
}

  • circle()： 定义一个圆形。

    .element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: circle(50%); /* 半径是元素宽/高的一半，就是一个正圆 */
}

    circle() 可以接受不同的参数：

    • circle(radius)：指定半径。例如，circle(75px) 表示半径为 75px 的圆。
    • circle(radius at center-x center-y)：指定半径和圆心位置。例如，circle(50px at 25% 75%) 表示半径为 50px，圆心在元素宽度 25%，高度 75% 的位置。
    • closest-side、farthest-side：分别表示最近边和最远边，自动计算半径。例如，circle(closest-side)。

  • ellipse()： 定义一个椭圆形。

    .element {
  width: 200px;
  height: 100px;
  float: left;
  background-color: lightblue;
  shape-outside: ellipse(50% 50%); /* 横纵半径都是50%，就是一个椭圆 */
}

    ellipse() 同样可以接受不同的参数：

    • ellipse(radius-x radius-y)：指定横向和纵向半径。例如，ellipse(100px 50px)。
    • ellipse(radius-x radius-y at center-x center-y)：指定横向、纵向半径和圆心位置。例如，ellipse(75px 25px at 25% 75%)。
    • closest-side、farthest-side：同样可以用于横向和纵向半径，例如 ellipse(closest-side farthest-side)。

  • inset()： 定义一个矩形，但可以设置内边距，从而形成一个内凹的形状。

    .element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: inset(20px); /* 上下左右内边距都是20px */
}

    inset() 接受 1 到 4 个参数，分别代表上、右、下、左内边距。如果只写一个参数，则上下左右相同。如果写两个参数，则第一个参数代表上下，第二个参数代表左右。如果写三个参数，则第一个参数代表上，第二个参数代表左右，第三个参数代表下。

    inset() 还可以与 round 关键字配合，创建圆角矩形：

    .element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: inset(20px round 10px); /* 圆角矩形 */
}

  • polygon()： 定义一个多边形。这是最灵活的形状，你可以用它创建任何你想要的形状。

    .element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%); /* 一个三角形 */
}

    polygon() 接受一系列坐标点，每个坐标点用百分比或像素值表示。这些坐标点会按照顺序连接起来，形成一个多边形。

    • polygon(x1 y1, x2 y2, x3 y3, ...)：例如 polygon(0 0, 100% 0, 100% 100%, 0 100%) 定义了一个矩形。

  • url()： 使用图片作为形状。浏览器会分析图片的透明度，透明区域就是文字可以环绕的区域。

    .element {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url(path/to/image.png);
}

    注意： 图片必须是 CORS 允许的，否则会报错。

  • image()： 和 url() 类似，但可以指定图片的裁剪区域和缩放方式。

     .element {
    width: 200px;
    height: 200px;
    float: left;
    shape-outside: image(url(path/to/image.png));
 }

    image() 可以接受多个参数，比如裁剪区域和重复方式，具体用法可以参考MDN文档。

  • linear-gradient()、radial-gradient()、conic-gradient()： 使用 CSS 渐变作为形状。这允许你创建一些非常有趣的视觉效果。

    .element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, black 50%);
}

    注意： 渐变必须要有透明区域，文字才能环绕。

第二章：Shape-Margin：给形状“留白”

shape-margin 属性定义了形状周围的空白区域，防止文字紧贴着形状。

.element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: circle(50%);
  shape-margin: 10px; /* 文字距离形状10px */
}

shape-margin 接受一个长度值，可以是像素、em、rem 等。

第三章：让文字“动起来”：Shape-Outside与动画

shape-outside 也是可以进行动画的，这让我们可以创造一些非常炫酷的效果。

.element {
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
  shape-outside: circle(50%);
  transition: shape-outside 2s ease-in-out;
}

.element:hover {
  shape-outside: ellipse(75% 25%);
}

当鼠标悬停在元素上时，形状会从圆形平滑过渡到椭圆形。你可以使用 CSS 过渡或动画来改变 shape-outside 的值，从而实现各种动态效果。

第四章：兼容性：老朋友IE的叹息

CSS Shapes 的兼容性并不是完美无缺的。

浏览器 支持程度
Chrome 良好
Firefox 良好
Safari 良好
Edge 良好
Internet Explorer 不支持

这意味着，如果你需要支持 IE 浏览器，你需要提供一些备选方案，比如使用传统的 float 布局或者 JavaScript 库来实现类似的效果。或者，干脆放弃支持IE（手动狗头）。

第五章：注意事项：别掉进坑里！

  • float 是必须的！ shape-outside 只有在浮动元素上才有效。
  • shape-outside 只影响行内元素（比如文字）的环绕，对块级元素无效。
  • shape-outside 的形状是相对于元素的边框盒（border box）来计算的。
  • 复杂的多边形可能会影响性能，尽量避免使用过于复杂的形状。
  • shape-margin 会增加元素的整体尺寸，需要注意布局。
  • 在使用 url() 时，确保图片是 CORS 允许的，并且图片已经加载完成。

第六章：实战演练：几个小例子

  1. 环绕头像：

    <div class="avatar">
  <img src="avatar.jpg" alt="头像">
  <p>这是一段文字，将会环绕头像显示。</p>
</div>
    .avatar {
  width: 150px;
  float: left;
  margin-right: 20px;
}

.avatar img {
  width: 100%;
  border-radius: 50%; /* 圆形头像 */
  shape-outside: circle(50%);
  shape-margin: 10px;
}

  2. 杂志风格排版：

    <div class="article">
  <div class="highlight">
    这是一个重点内容。
  </div>
  <p>这是一段文字，将会环绕重点内容显示。</p>
</div>
    .article {
  width: 500px;
}

.highlight {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 20px;
  background-color: yellow;
  shape-outside: polygon(0 0, 100% 0, 75% 100%, 0 100%); /* 一个倾斜的矩形 */
  shape-margin: 10px;
}

  3. 心形环绕：

    <div class="heart">
  <p>这是一段文字，将会环绕心形显示。</p>
</div>
    .heart {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
  background-color: pink;
  shape-outside: polygon(
    50% 20%,
    80% 0%,
    100% 30%,
    100% 70%,
    80% 100%,
    50% 80%,
    20% 100%,
    0% 70%,
    0% 30%,
    20% 0%
  );
  shape-margin: 10px;
}

第七章：总结与展望

CSS Shapes 是一项强大的技术，它可以让你摆脱矩形布局的束缚，创造出更加丰富多彩的网页设计。虽然兼容性还有待提高，但它代表了未来网页设计的趋势。

希望今天的课程能让你对 CSS Shapes 有更深入的了解。记住，大胆尝试，不断创新，你也能成为 CSS 魔法师！

今天的课就到这里，下课！记得点赞，收藏，转发，下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注