利用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属性在圆内设置文本