利用css shape-outside属性在圆内设置文本

如何只使用 HTML 和 CSS 在圆形内展示文本（如上图），大家可以自己先思考一下实现方式，如果你的项目有这样的需求，你该如何实现？

经过一阵查阅资料发现 CSS 中有个shape-outside属性名，可以很好实现改效果，在MDN中是这样定义的

译：一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

语法

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/*  值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

兼容性

我的目标是想让<blockquote>在圆形内显示和引用。同时还希望使布局尽可能灵活。这种布局不需要任何其他组件，并且可以使 HTML 标记干净利落。

注：Internet Explorer 或 Microsoft Edge 18 及更低版本中不支持该 shape-outside 功能。

实现方式

我们最终将需要一个 wrapper 元素来实现这一目标，因此让我们将语义<blockquote>用作内部元素。外包装可以是 div，html 代码如下：

<div class="quote-wrapper"> 
   <blockquote class="text"> 
    <p> 夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。 </p> 
    <footer>
     – 网摘美句
    </footer> 
   </blockquote> 
</div>

让我们从 div 外包装器开始。首先，我们将最小（响应）正方形尺寸设置为 300px，使其适合较小的屏幕。然后，我们将添加相对定位（因为稍后需要使用）。

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

现在，我们将使 blockquote 充满整个包装，并伪造一个带有径向渐变背景的圆形。（border-radius 在这个例子中我们没有使用）

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
  color: white;
  position: relative;
  margin: 0;
}

有一点需要注意的是，70%显示了一个更粗糙的边缘。我手动添加非常小的百分比增量，发现 70.3%看起来是最平滑的。

此时效果：

通过 CSS 处理对段落设置样式：

.text p {
  font-size: 18px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

blockquote的::before伪元素来创建外形。这是该shape-outside属性发挥作用的地方。我们绘制出polygon()坐标并将其浮动到左侧，以便文本环绕在形状内。

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

此时效果是这样子的

看起来不错，但是页脚去了哪里？它溢出了<blockquote>，因此我们无法在白色背景上看到该白色文本。

设置页脚样式

现在，我们可以设置的样式<footer>并为其赋予绝对位置，以使其重新位于圆顶部。

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

修改引号样式

我们将利用的::before伪元素.quote-wrapper。再一次，这将需要花费很多时间才能使其看起来正确。我发现line-height它对图标的垂直位置有很大的影响。

.quote-wrapper::before {
  content: "\201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

实际上卷曲的引号和直的引号是有区别的。我个人建议对话时使用卷曲引号，编码时使用直引号。

处理响应式

如果是在一些大的屏幕上我们需要对部分属性做一个调整。我将断点设置为 850px，至于其他的属性修改根据需要作出更改。

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

完整代码

//css 代码
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    font-family: "Titillium Web", sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: #161b1e;
}

.quote-wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 10vh auto 0;
}

.text {
    width: 100%;
    height: 100%;
    background: radial-gradient(
	ellipse at center,
	rgba(0, 128, 172, 1) 0%,
	rgba(0, 128, 172, 1) 70%,
	rgba(0, 128, 172, 0) 70.3%
    );
    position: relative;
    margin: 0;
    color: white;
}

.text p {
    height: 100%;
    font-size: 18px;
    line-height: 1.25;
    padding: 0;
    text-align: center;
    font-style: italic;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text::before {
    content: "";
    width: 50%;
    height: 100%;
    float: left;
    shape-outside: polygon(
	0 0,
	98% 0,
	50% 6%,
	23.4% 17.3%,
	6% 32.6%,
	0 50%,
	6% 65.6%,
	23.4% 82.7%,
	50% 94%,
	98% 100%,
	0 100%
    );
    shape-margin: 7%;
}

.text p::before {
    content: "";
    width: 50%;
    height: 100%;
    float: right;
    shape-outside: polygon(
	2% 0%,
	100% 0%,
	100% 100%,
	2% 100%,
	50% 94%,
	76.6% 82.7%,
	94% 65.6%,
	100% 50%,
	94% 32.6%,
	76.6% 17.3%,
	50% 6%
    );
    shape-margin: 7%;
}

.quote-wrapper blockquote footer {
    width: 100%;
    position: absolute;
    bottom: 25px;
    font-size: 17px;
    text-align: center;
    font-style: italic;
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.quote-wrapper::before {
    content: "\201C";
    font-size: 270px;
    height: 82px;
    line-height: 0.78;
    line-height: 1;
    position: absolute;
    top: -48px;
    left: 0;
    z-index: 1;
    font-family: sans-serif, serif;
    color: #ccc;
    opacity: 0.9;
}

@media (min-width: 850px) {
    .quote-wrapper {
        width: 370px;
        height: 370px;
    }

    .quote-wrapper::before {
        font-size: 300px;
    }

    .text p {
        font-size: 26px;
    }

    .quote-wrapper blockquote footer {
        bottom: 32px;
    }
}

结语

以上就是码云笔记前端博客为大家带来的利用 css 的shape-outside属性结合<blockquote>实现在圆形内展示文本，希望通过本文鼓励大家使用 shape-outside 来探索新的布局。

以上关于利用css shape-outside属性在圆内设置文本的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。