太原网站设计:如何在Web设计中使用CSS形状

2019.08.02 mf_web

139

我们今天用于构建网站的布局原则 - 列和行,角度和线条在很大程度上受其印刷遗产的影响。虽然  网络上的网格实现越来越好,但是与打印媒体相比,网页布局总体上仍然很难,特别是在内容流方面。 

太原网站设计杂志和报纸总是享受优雅的方式来安排内容布局,例如在非矩形形状周围或内部包裹文本。

简单杂志布局的一个例子
GreenSocks的多用途杂志

让我们来探讨CSS形状模块如何在网络上实现同样的自由。

CSS形状的快速介绍

CSS Shapes使Web设计人员能够创建更简单的矩形和正方形之外的更抽象的几何布局。规范为我们提供了新的CSS属性,包括shape-outside 和shape-margin。浏览器支持  是合理的,但这些属性目前仅在Chrome,Opera和Safari中可用-webkit-,因此具有前缀-webkit-shape-outside。 

该shape-outside属性将导致内联内容在元素曲线后面(外部)而不是框模型。最初还有  shape-inside 将内容包装在元素中; 圆形元素内的文本也将被模制成圆形。但是,CSS Shapes Level 2的实现已被推迟。

包含在圆圈内外的段落
从上到下:形状外部和形状内部动作。

该shape-margin属性设置使用的任何形状的边距shape-outside。 

我们来看看一些例子。

创建一个形状

找出CSS Shapes如何工作的最简单方法可能是创建一个圆圈。所以,这是一个div (我们的圈子),旁边有几个段落。

1
2
3
4
<div class="circle"></div>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>

这是一些基本的样式,包括我们的圆的宽度和高度,  border-radius 形状元素和浮动,所以段落包裹元素。

1
2
3
4
6
7
.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

正如我们所说的那样,段落现在围绕着元素。但是,由于border-radius属性未定义实际的元素形状,因此段落换行不会形成圆曲线。

如果我们通过浏览器DevTools检查元素,我们会发现元素实际上仍然是一个盒子。因此,即使我们的div具有圆形外观,但它对元素border-radius 的实际形状没有任何作用。

一个段落环绕一个元素
注意元素周围的矩形突出显示。

为了使我们的段落遵循圆形,我们需要通过 属性来改变实际的元素形状  shape-outside; 在这种情况下,我们将添加一个circle() 作为值传递的  函数。

1
2
3
4
6
7
8
9
.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}


另外,如果我们现在通过DevTools检查元素,我们将看到元素被正确地渲染成圆形。

一个段落环绕一个圆形元素
请注意较暗的高光。

自定义圆圈

该  circle() 函数分别用于定义半径和中心坐标的几个值:  circle(r at x y)。默认情况下,半径值是从元素大小派生的; 300px 例如,如果元素很  宽,则半径将是  150px (半径是圆的直径的一半)。 

类似地,  x 和  y 坐标是相对于元素大小测量的,它们默认设置为  50% 50%; 就在元素的中心。

圆坐标图
圆圈位于元素的中心。 

当您想要调整形状大小,同时保持实际元素大小或在保留元素位置的同时移动形状时,这两个值将非常有用。在下面的示例中,我们将圆半径减小到60px 并将中心坐标设置为  30% 70%,这应该将圆移动到元素框的左下角。

位置元素
该段现在通过通过下面的圆圈大小的元素框。查看演示。

值得注意的是,在修改圆时,必须明确定义中心坐标和半径; 只添加其中一个是无效的。

1
2
3
circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

形状盒模型

CSS Shapes继承与元素相同的box模型原则,但应用于元素本身的范围之外。这允许我们border-box 在将形状设置为时  分别设置元素  padding-box。要改变形状盒模型,添加的一个盒子模型的关键字,content-box,margin-box,border-box,或padding-box之后的功能。

01
02
03
04
05
06
07
08
09
10
11
12
.circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  padding: 10px;
  border: 20px solid #ccc;
  margin: 30px;
  -webkit-shape-outside: circle() padding-box;
    shape-outside: circle() padding-box;
}

形状的默认框模型设置为  margin-box。在下面的示例中,我们已将其更改  padding-box 为告知浏览器在确定形状大小或跨度时排除元素边距。现在我们应该找到段落穿过边框,并立即触摸元素的填充。

橙色正方形是边距,黄色正方形是边框,绿色正方形是填充,

我强烈建议您查看我们关于CSS Box模型基础知识的免费课程,   了解更多关于盒子模型如何工作的详细信息。

创造更多形状

CSS Shapes规范附带了一些形状函数:

  • ellipse():顾名思义,此函数将创建一个椭圆形状。我们可以配置椭圆半径并移动形状中心坐标。但与circle() 功能不同  ,该  ellipse() 功能应用两个半径测量,水平和垂直,因此  ellipse( 100px 180px at 10% 20% )。

  • polygon():此功能使我们能够创建更复杂的形状,如三角形,六边形以及非几何形状。使用多边形并不像创建圆一样简单,但“  多边形路径转换器”  工具使其更直观。

包起来

在本教程中,我们研究了CSS Shapes的基本应用; 我们创建了一个形状,定制了尺寸,位置和盒子模型。在撰写本文时,CSS Shapes的几个方面仍然非常粗糙,这可能就是为什么我们还没有看到它被广泛使用。

  • 正如本教程前面提到的那样,CSS Shapes  shape-inside 属性允许我们在元素内包装和整形内容,它已被放到了冰上。

  • CSS Shapes规范提供了一个单独的属性,  shape-box 用于定义形状框模型,但它目前似乎不适用于任何浏览器。

  • Safari需要  -webkit- 前缀,突出显示此功能是实验性的。

太原网站设计尽管如此,尽管目前浏览器的进展缓慢且差异很大,但我期待着CSS Shapes!一旦主流浏览器拿起它,我就迫不及待地想在网上看到一些非常有创意的布局!


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP