css形状_使CSS形状更上一层楼

最新推荐文章于 2024-04-12 01:19:50 发布

翻译最新推荐文章于 2024-04-12 01:19:50 发布 · 196 阅读

文章标签：

#python #css #java #javascript #js #ViewUI

css形状

在上一教程中，我们瞥了一眼创建CSS Shapes的过程，使我们能够定义元素的真实形状。我们谈到了基础知识；创建一个圆并在其周围包裹几行文字。现在让我们探索更复杂的形状，使我们的页面布局更丰富，更简洁。

创建多边形

除了诸如圆形和矩形之类的简单形状，我们还可以创建多边形 。由多个（通常为五个或更多）边组成的形状，例如五边形或六边形。要创建一个，我们使用CSS polygon()函数，该函数采用多个逗号分隔的值来定义形状坐标：

.shape {
   float: left;
   background-size: contain;
   background-repeat: no-repeat;
   margin: 30px;
   width: 265px;
   height: 265px;
   shape-margin: 20px;
}
.pentagon {
   background-image: url('../img/pentagon.svg');
   shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}

通过以上代码，我们添加了五个坐标，从而生成了五边形形状。向该函数添加另一个坐标会将形状变成六边形，另外一个用于七边形，另一个用于八边形，依此类推。

手动创建多边形形状并不像创建圆形或椭圆形那样容易，尤其是在多边形复杂且包含数十个坐标的情况下。幸运的是，有一个方便的工具可以使创建CSS Shapes更加直观。

使用CSS形状编辑器

CSS Shapes Editor是一个Chrome扩展程序。安装后，它将在“ 元素”选项卡下的DevTools中添加一个名为Shapes的新选项卡，并与其他子选项卡（ “样式” ，“ 计算机 ”等）内联。

Shapes选项卡包含一个shape-outside属性和一个加号+，以帮助我们添加CSS Shape函数。我们选择页面上的polygon()和元素，然后就可以像在图形应用程序中一样在浏览器中开始绘制形状。

绘制时，浏览器扩展将使用绘制的形状的相应坐标更新多边形函数，同时将其作为内联样式添加到元素中。完成后，复制生成的代码并将其粘贴到样式表中。

使用相同的技术，我们可以轻松地在网页上绘制并应用任何形式或形状，例如：

提取图像形状

我们可以在shape-outside属性中使用的另一个可能的值是url()函数；与我们在CSS其他地方使用的添加背景图像的功能相同。在这种情况下， url()函数使shape-outside属性可以基于图像定义元素形状。

当您有一个特别复杂的图形（具有许多曲线和拐角）并且希望您的内容平滑环绕时，您可以选择使用url()函数而不是polygon() 。或者，在处理用户生成的内容时，很难定义形状。

我们将使用Unsplash的金刚鹦鹉鹦鹉。首先，您将需要创建一个具有透明度的版本，例如：

原始的鹦鹉图像将作为背景图像添加到容器中：

.container {
   background-repeat: no-repeat;
   background-image: url('../img/parrot.png');
}

透明度阈值

对于形状本身，我们将其添加到容器中的另一个元素中，这一次，我们将使用另一个CSS形状属性shape-image-threshold 。

.shape {
   shape-margin: 15px;
   shape-outside: url('../img/parrot-shape.png');
   shape-image-threshold: 0;
}

这个特殊的属性设置了定义图像形状的最小透明度阈值。它采用0到1之间的数字作为值。因此，如果图像有些透明，则可能需要将其设置为0.8或0.5 。我们将值设置为0因为鹦鹉形状周围的区域是完全透明的。

结果应类似于：

提供后备

浏览器对CSS Shapes的支持不错。尽管对Firefox，Internet，Explorer或Edge期望不高。另外，响应上一个教程中的Stephen问题，我们有几种选择。

“这很酷，但真正的问题是：IE / FF的后备之处是什么？对于许多用户来说，采用形状布局进行全貌似乎最终会出现在某些怪异的地方。” – 斯蒂芬·贝特曼

首先，我们可以使用Modernizr。 Modernizr是用于浏览器功能测试的可靠JavaScript库。下载库时，请确保已包括CSS Shapes和Add CSS classes选项。然后，当不支持CSS Shape时，可以指定布局样式，如下所示：

/**
 * When the browser does not support "CSS Shape".
 */
.no-shapes .shape {
   shape-outside: polygon();
}

/**
 * Styles when the browser supports "CSS Shape".
 */
.shapes .shape {

}

如果加载Modernizr似乎过多，则由于仅需要测试浏览器是否启用了CSS，因此可以添加以下JavaScript行。

if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
   document.body.classList.add('no-css-shape');
}

CSS中的每个属性在JavaScript Style对象下都具有与其等效的属性，这使我们能够通过JavaScript动态添加样式。此代码检测浏览器是否具有shapeOutside方法，如果不是这种情况，我们添加no-css-shape类，我们可以利用该类添加后备样式。

.shape {
   shape-outside: polygon();
}
.no-shapes .shape {

}

最后，例如，我们可以在样式表中使用CSS @support语法。

@supports (shape-outside: circle()) {
   .shape {
      shape-outside: circle();
   }
}

由您决定哪种方法最适合您的项目。

CSS Shapes的一大优点是具有自然的备用功能。没关系有一个正方形。 http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
— Jen Simmons（@jensimmons） 2015年2月11日

结语

在本教程中，我们发现了如何在CSS Shape中使用polygon()函数，并了解了如何使用Chrome扩展程序轻松绘制多边形。我们还学习了如何利用图像为我们绘制形状。特别适用于形状过于复杂的情况。最后，尽管CSS Shapes提供了合理的浏览器支持，但我们讨论了对不受支持的浏览器使用优美的替代方案。

演示版

有用的链接

翻译自: https://webdesign.tutsplus.com/tutorials/taking-css-shapes-to-the-next-level--cms-27907

css形状