使用CSS剪辑路径构建循环导航

CSSclip-path属性是CSS中使用最少但最有趣的属性之一。它可以与CSS形状结合使用来创建有趣的布局，也可以发挥到极致来创建一些令人难以置信的令人印象深刻的布局和动画，比如Species in Pieces项目。在探索使用CSS和SVG创建任意形状的UI组件时，我想到了clip-path属性，当与SVG路径结合使用时，可以很容易地创建循环菜单，特别是在按照规范处理裁剪区域上的指针事件时，考虑到（预期的）浏览器行为。让我们进一步探讨这个想法。 h3>svg>Some Backgroundp>几年前，我为Codrops写了一篇关于使用CSS转换和一些CSS技巧来创建仅限CSS的循环菜单的文章。这种技术不是最佳的或直观的，需要大量的变通方法和技巧才能达到预期的效果。要使用这种技术创建菜单，您可以通过倾斜菜单项来伪造扇区形状，然后通过隐藏其容器上的溢出来剪裁它们。而且，由于你一开始是扭曲菜单项，因此你需要\"不倾斜\"菜单项中的内容，这些内容在容器扭曲后会被扭曲。结果菜单不灵活，需要大量的修改，而且它里面的内容在大多数情况下仅限于图标，因为其他内容很难在歪斜的项目里面定位和设置样式。您可以在本文中了解该技术的所有细节。今天，CSSclip-path属性与CSS路径相结合还可以用于在CSS中创建循环菜单。这项技术并不老套，不需要任何奇怪的转换工作区，而且工作方式和您期望的一样。在撰写本文时存在一些限制和一个浏览器错误（请参见下一节），但是创建菜单所需的代码非常简短、简洁且易于理解。但是在深入研究代码之前，即使代码简单易懂，如果您还不熟悉路径是什么，它们做什么，以及它们是如何工作的，那么您可能需要先了解更多关于裁剪路径的知识。您可以在我的博客上的一篇文章中了解到它们的全部内容。在我们进入代码和现场演示之前，我们还需要浏览一下关于浏览器支持的一些注释： browser support（and Bugs） - 我们将使用CSSclip-path属性，所以首先要注意的是浏览器支持。正如CanIUse提供的支持表所示，属性的支持并不是最好的，特别是没有版本的IE支持它，甚至连MS-Edge都不支持。 - IE目前还不支持CSS中的剪辑路径，但是否\"正在考虑中\"。 - li>如果使用CSS基本形状函数定义剪辑路径，Firefox不会应用该剪辑路径，因为它目前只支持引用SVG元素的剪辑路径值。Firefox还不支持基本的CSS形状函数。（请参阅本节末尾的回退提示。） - 当使用的剪辑路径在SVG中定义时，基于WebKit/Blink的浏览器无法正确处理指针事件。这是一个错误。默认情况下，指针事件不应调度到clipped元素的可见区域之外；根据规范，这是预期的行为。使用CSS基本形状函数定义剪辑路径时，这些浏览器会正确处理指针事件。但是，当您通过clip-path属性应用SVGclipPath时，指针事件仍被调度到可见区域之外，这将干扰并阻止位于剪裁元素后面/下面的任何元素上的指针事件。我在写这篇文章的时候提交了一个错误报告。希望它能尽快修好。这个bug意味着本文中的演示目前无法在基于WebKit/Blink的浏览器中运行。（抱歉） - 基于Blink的浏览器中还有另一个bug，它会导致一个非常奇怪的渲染问题（这是一个合成问题），这也使得在hover上对剪裁的元素应用转换效果在今天几乎是不可能的。因此，对于本文中的菜单，在单击时上下缩放菜单，例如，使用CSS缩放转换会导致一个巨大的问题，因此我们将跳过打开/关闭效果。我还为此问题提交了一份错误报告。 - 简而言之：本文的演示目前只能在发布时在Firefox中正常工作。如果您决定更改文章中使用的剪辑路径并将其替换为CSS基本形状，则演示将在其他浏览器（不包括IE/Edge）中工作，但不是在火狐里。如果您想使用基本的CSS形状函数

使用CSS剪辑路径构建循环导航

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

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

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

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

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

谷歌的SEO是什么