使用CSS设置圆内的文本

2021-10-16 12:00:04 other 阅读：714
你想用HTML和CSS在圆形中设置一些文本吗？那是胡说八道，对吧？ 不是真的！多亏了shape-outside和一些纯粹的CSS技巧，才有可能做到这一点。然而，这可能是一个棘手的布局选项。我们必须考虑很多不同的因素，比如字符数、字数、字体变化、字体大小、字体格式和响应要求等等。一个尺码，不适合所有的。但是，让我们还是这样做吧。 我们的目标是：在一个圆形内显示一个和作者属性（名称）。我们还想使布局尽可能灵活。这种布局不需要任何额外的文件，并保持HTML标记的整洁。 这就是我们所追求的：CodePen Embed Fallback 撰写本文时，Internet Explorer或Microsoft Edge 18及以下版本不支持shape-outside功能。首先，HTML 我们最终需要一个包装器元素来完成此操作，因此让我们使用语义作为内部元素。外部包装可以是div: If you\"re interested in a deep-dive on the HTML of quotes, you\"re in luck. We\"re going to set the quote itself in a 和中的作者姓名。我们已经得到了我们需要的CSS样式挂钩的类名。 h3>svg>。首先，我们将最小（响应）平方大小设置为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%;} 需要注意的一点是，70%显示出更粗糙的边缘。我手动添加了非常小的百分比增量，发现70.3%看起来最平滑。请注意，右侧的边比左侧的边平滑得多。 现在我们有了基圆。将这些附加的样式规则添加到.text中。 .text {color: white;position: relative;margin: 0;} 以下是我们到目前为止的内容： 为文本提供CSS处理方式 让我们先将段落样式化： .text p {font-size: 21px;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);}*作为shape-outside。这会在多边形上产生更平滑的半圆曲线。 让我们使用blockquote的s::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%;} 让我们将径向背景色更改为红色。路径编辑器多边形点和连接线也是蓝色的。我们正在临时更改此颜色，以便与编辑器工具形成更大的对比度。 background: radial-gradient(ellipse at center,rgba(210, 20, 20, 1) 0%,rgba(210, 20, 20, 1) 70%,rgba(210, 20, 20, 0) 70.3%); 我喜欢Firefox的开发人员工具，因为它具有像shape-outside路径编辑器这样超级方便的功能。 ；单击\"检查器\"中的多边形形状以在浏览器窗口中查看活动形状。感谢Mozilla开发团队创造了一个非常酷的界面！Firefox形状编辑器工具也适用于clip-path和的值。 这里是我们目前的情况：形状上的点来自Firefox的编辑工具。我们可以对段落做同样的事情::before伪元素。我们用shape-outside做同样的多边形，反向，然后向右浮动。 .text p::before {content: \"\";float: right;height: 100%;width: 50%;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 {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%;} ，您可以随意更改背景颜色以满足您的需要。 这就是精巧部分的用武之地。文本本身的样式需要确保单词和字符的数量在形状中起作用。我使用了这些CSS规则来帮助它很好地适应： ；还有min-height（相当于.quote-wrapper容器的大小）为一些繁衍添加引号 您看到原始演示中的巨大引号了吗？这就是我们接下来要做的。 我们将利用::before伪元素来表示.quote-wrapper。再说一次，这将是一个好主意

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子：：在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点：#说明#源码说明（Description）钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码（Source）更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期：2020-09-02 17:44:16 浏览：1169

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩：在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点：#说明#参数#源码说明（Description）钩子名的动态部分，$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数（Parameters）参数类...

日期：2020-09-02 17:44:20 浏览：1070

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this->id_data[‘base’]}", WP_Customize_Setting $this )动作钩子：：在调用WP_Customize_Setting：：save（）方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分，$this->id_data...

日期：2020-08-15 15:47:24 浏览：806

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this->id_data[‘base’]}", mixed $default )过滤器：：过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分，$this->id_date['base']，指的是设置...

日期：2020-08-15 15:47:24 浏览：898

get_comment_author_url

过滤钩子：过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点：#源码源码（Source）更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期：2020-08-10 23:06:14 浏览：930

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩：启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点：#说明#源码说明（Description）钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码（Source）更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期：2020-08-02 09:56:09 浏览：876

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩：在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点：#说明#参数#源码说明（Description）钩子名称的动态部分$_GET['updated']引用了非默认的...

日期：2020-08-02 09:56:03 浏览：864

pre_wp_is_site_initialized

过滤器：：过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点：#源码源码（Source）更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期：2020-07-29 10:15:38 浏览：833

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

你想在WordPress 中添加关键字和meta 描述吗？关键字和meta 描述使你能够提高网站的SEO。在本文中，我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述？关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时，可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯，可以参考Google的说明。Meta 关键字和描...

日期：2020-10-03 21:18:25 浏览：1722

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化，意思近于「关键字自然排序」、「网站排名优化」。简言之，SEO是以搜索引擎（如Google、Bing）为曝光媒体的行销手法。例如搜寻「wordpress教学」，会看到本站的「WordPress教学：12个课程…」排行Google第一：关键字：wordpress教学、wordpress课程…若搜寻「网站架设」，则会看到另一个网页排名第1：关键字：网站架设、架站…以上两个网页，每月从搜寻引擎导入自然流量，达2万4千：每月「有机搜...

日期：2020-10-30 17:23:57 浏览：1308