使用CSS将文本设置在圆圈内

是否只使用HTML和CSS创建一个圆形文本显示？可以通过shape-outside属性和一些巧妙的CSS技术来实现。但是，这种方法需要仔细考虑文本长度，字体选择和响应能力等因素。

这是一个目的：我们将在一个圆圈内嵌入引用和作者归因，以寻求灵活而干净的解决方案。此方法避免了额外的文件并保持HTML简洁。最终结果应该类似于：

（注意：Internet Explorer或Microsoft Edge的旧版本不支持shape-outside 。）

HTML结构

我们将使用一个<div>作为外套和语义<code><blockquote></blockquote>作为内部容器：

<div class="quote-wrapper">
  <blockquote cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p class="text">经验设计是独立于媒体或跨媒体的任何事物的设计，具有人类的经验是明确的结果，并且是人类参与作为明确的目标。</p>
    <footer> - 杰西·詹姆斯·加勒特（Jesse James Garrett）</footer>
  </blockquote>
</div>

报价在<p>在类“文本”中，作者属性在<code><footer></footer>。这些课程为CSS样式提供了钩子。

初始CSS样式

让我们从包装纸开始：

 。
  身高：300px;
  位置：相对；
  宽度：300px;
}

这为响应能力设定了最小尺寸，并为以后的调整建立了相对定位。

接下来，我们将使用径向梯度创建圆形外观：

 。文本 {
  背景：径向梯度（
    椭圆形在中心，
    RGBA（0，128，172，1）0％，
    RGBA（0，128，172，1）70％，
    RGBA（0，128，172，0）70.3％
  ）；
  身高：100％；
  宽度：100％；
  颜色：白色；
  位置：相对；
  保证金：0;
}

注意：70.3％的值比简单的70％提供了更光滑的边缘。

文本样式和形状定义

让我们样式段落：

 .Text P {
  字体大小：21px;
  字体风格：斜体；
  身高：100％；
  线高：1.25;
  填充：0;
  文字平衡：中心；
  文本阴影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）;
}

要塑造文本区域，我们将在伪元素和shape-outside属性::before 。这涉及定义一个近似圆的多边形：

 .text :: {
  内容： ””;
  浮子：左；
  身高：100％；
  宽度：50％；
  形状外面：多边形（
    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％
  ）；
  形状净值：7％；
}

类似的::before可以应用于<p>元素创建圆的另一半。</p> <h3 id="页脚样式">页脚样式</h3> <p>为了正确定位作者归因，我们将使用绝对定位：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 。 底部：25px; 字体大小：17px; 字体风格：斜体； 位置：绝对； 文字平衡：中心； 文本阴影：0.5px 0.5px 1PX RGBA（0，0，0，0，0.3）; 宽度：100％； }</pre><div class="contentsignin">登录后复制</div></div> <p>可能需要对<code>font-size ， shape-margin ， line-height和其他属性进行微调以实现形状内的最佳文本拟合。

添加报价标记

可以使用::before pseudo-element上的:: .quote-wrapper添加大号标记：

 。引用wrapper :: {
  内容：“ \ 201C”；
  颜色：#ccc;
  字体家庭：sans-serif，衬线；
  字体大小：270px;
  身高：82px;
  线高：1;
  不透明：.9;
  位置：绝对；
  顶部：-48px;
  左：0;
  z索引：1;
}

响应式设计

媒体查询可用于调整不同屏幕尺寸的大小：

 @Media（最小宽度：850px）{
  。
    身高：370px;
    宽度：370px;
  }
  / * ...大屏幕的其他调整... */
}

这种全面的方法允许仅使用HTML和CSS创建视觉上吸引人的循环文本显示。请记住，根据您的特定文本和设计偏好可能需要进行微调。

以上是使用CSS将文本设置在圆圈内的详细内容。更多信息请关注PHP中文网其他相关文章！