这些天我们使用CSS的变形制造各种CSS形状,但所有这些形状不影响内容或让内容围绕他们。也就是说,如果你用CSS创建的三角形或梯形,例如,创建的形状没有影响文档流或是文本无法围绕它们。
通过在Web页面引入CSS形状,内容围绕自定义形状或印刷中的非矩形布局再现网页中,这或许都是大家期待的。
在本文中我们将复习基本的CSS形状,并使用这些新的CSS技术创建一些简单的布局。当更多的CSS形状的特性实现,我们就可以实现更多的复杂的,可怕的布局,现在我们可以通过一些实验创建一些很有趣很有创造力的布局。
这篇文章中讨论的是CSS的前沿技术,并不支持所有的浏览器。如果你想看到有这些效果,你需要确保你的浏览器支持这些技术。你不需要一个支持的浏览器来理解这些特性和演示。因为这里有一些演示的截图,这样你可以看到最终你想看到的效果。
在撰写本文的时候,只有Chrome Canary支持带有前缀的CSS形状,但仍需要通过chrome://flags/
进行设置。确保你开启了CSS形状特性。
你可以点击每个演示的截图来查看每个DEMO效果。
请注意,当更多的规范实现的时候,文中提到的信息可能改变当前支持的CSS形状。
##声明变形
所有HTML元素都有一个矩形的盒模形,用来管理文档流以及文档围绕在元素的四周。为了给一个元素自定义一个非矩形的形状,可以使用shape-inside
和shape-outside
属性。在撰写这篇文章的时候,shape-outside
属性只可以应用于浮动元素,而shape-outside
属性不能完全支持,所以你现在使用的时候会发生一些错误。而且shape-*
属性只能适用于块级元素。如果你想将变形属性必须将元素转换为块元素。
shape-*
属性采有三个值中的一个:auto,一个基本的形状或一个图像的URL。如果将其值设置为auto
,元素浮动区域使用正常的margin
。(如果你不熟悉CSS盒模型,你必须得先阅读它,因为你得知道它是如何工作的)。
如果要给变形函数设置一个值,可以选择期中的一个值:rectangle
,inset-rectangle
,circle
,ellipse
或者polygon
。通过Adobe团队的这篇文章你可以了解更多关于变形函数的功能。
最后,如果该值被设置为一个图像的URI,浏览器会基于图像的alpha通道提取和计算出形状。计算机计算形状的路径包含的图片指定的透明度大于shape-image-threshold
值。如果没有指定shape-image-threshold
的值,那么其默认值为0.5
。图像应该是CORS-same-origin,否则,它不会工作,计算机计算形状的默认值为auto
。
如果使用shape-outside
属性定义的形状不会围绕一个元素,而使用shape-inside
属性定义的形状会围绕一个元素。我们将在下面的例子中了解每种方法的使用。
通过shape-*
属性定义的变形可以通过shape-margin
和shape-padding
属性来修改。变形的margin
和padding
都是不言而喻的。
##在元素上建立一个坐标系统
对于CSS形状实际应用在元素上,我们通过一个坐标他信息来绘制形状。
坐标系统是必要的,在坐标系统上,形状将被定义成一组点(通过半径画员或椭圆)和使用X,Y坐标定义坐标。
shape-*
属性使用元素的内容盒子来定义他们的坐标系统,所以为了让他们工作,你需要给元素定义一个固定的宽度和高度,这也是用来给你绘制形状建立坐标系统。如果没有显式指定宽度和高度,shape-*
属性不能正常工作。
坐标系统的原点定义在元素边框的左上角。
所以,要给一个元素绘制一个形状,必须要先做到:
- 为了使用形状,指定元素尺寸(记住:使用shape-outside
元素是浮动在周边)
- 使用shpae-*
属性决定元素的形状
##使用背景来自定义形状
虽然边界用于包装内联内容外的浮动可以定义形状,实际的盒模型模式并没有改变。如果元素有指定的
margin
、padding
或border
,他们将根据CSS3盒模型进行计算和渲染。——W3C CSS Shapes Module Level 1
换句话说,使用shape-*
属性定义元素形状仅影响元素的浮动区域,即这个元素内/外的流动的内容,但元素其他属性不受影响。
例如,假设你只想画一个圆形,喜欢的内容浮动在其侧,如下图所示,你必须首先声明元素的圆形形状(再一次,记住浮动元素,并给它一个高度和宽度)。然后,你给圆形应用一个背景颜色,看起来更像一个图像。
你会想只是给一个包含元素添加一个背景颜色,然后最终有上面的结果(这是我第一次做),但这样做不会做这项工作。原因是,元素的所有属性,除了围绕在外面的内容流,不会影响你的形状,而且们他们的内部定义将根据元素的盒模型(矩形)呈现,我们已经看到了规范。所以如果你定义一个背景颜色,你就会有下面这样的效果。
所以,我们能只给形状运用颜色而不是整个元素?这就需要CSS朦板规范的clip-path
属性帮忙。
这个clip-path
属性将被运用元素的剪切部分,我们不需要和保持定义的内部形状那部分。这显然意味着我们实际上不应用有颜色的形状,我们只需要他们微调元素,只留下完整的形状。这样,你就会有一个浮罢的圆外面被文本包含。
究竟如何?clip-path
属性的什么值可以做这些呢?
用户通过clip-path
属性定义的图形来定义坐标系统确定剪切路径包围元素,所以shape-*
属性具有相同的坐标系统。
正因为如此,我们在剪切路径上使用shape-*
属性定义相同的形状,元素内容夹在形状的周围。我们最终会得到一个自定义形状与背景。
你可以在pen测试这个概念,只要确保你测试在浏览器能运行(目前只有Chrome Canary)。