这篇文章主要介绍了css3中& lt; basic-shape>如何使用,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>
& lt; basic-shape>是一种表现基础图形的CSS数据类型,作用于clip-path与shape-outside属性中。
& lt; basic-shape>数据类型可以由基本形状函数指定,即可以使用基本形状函数来定义基本形状,请参阅下面的“基本形状函数”部分,列出可能的形状函数值及其简单描述。
然后将基本形状作为值传递给属性(如shape-outside属性或clip-path属性),这些属性用于将形状应用于元素以更改其周围的内容流,或将元素剪切到分别定义形状。
除了元素的高度和宽度之外,元素的框模型框:边距框(margin-box),内容框(内容框),填充框(padding-box)和边框(border-box),也可用作参考来指定元素上的形状范围。参考框可以是四个框中的任何一个。
当把& lt; basic-shape>用于定义形状时,引用框由使用& lt; basic-shape>值(基本形状函数)的每个属性定义(请参阅下面的示例部分)。基本形状的坐标系的原点位于参考框的左上角,x轴向右移动,y轴向下延伸。以百分比表示的所有长度均从参考盒的使用尺寸中解析出来(百分比定义的长度将通过相关盒模型与使用的维度重定义)。如果未指定引用框,则边框将用作clip-path属性的引用框,并且边框用于属性中使用的形状shape-outside。
以下为当前& lt; basic-shape>所支持的图形。所有& lt; basic-shape>值都由函数表达式定义,并且遵循属性值定义语法(价值定义语法)。
<强> 1,插图()
语法:
说明:
插图()函数定义了一个插入矩形。
它需要1 ~ 4个偏移值,它们指向内部参考框边缘(上、右、下与左边界和顶点)的偏移量。这些指定了插入矩形在元素内的位置。
可选参数& lt; border-radius>用于定义插进长方形顶点的圆弧角度。
<强> 2圈()
圆()函数定义了一个插入圆
& lt; shape-radius>参数代表了r,即圆形的半径,不接受负数作为该参数的值。
& lt; position>参数定义了圆心的位置。省缺值为盒模型的中心。
<强> 3,椭圆()
椭圆()函数定义了一个椭圆;
& lt; shape-radius>参数可以有两个值,分别为了rx与,其中rx代表了x轴方向的半径,一代表了y轴方向的半径;该参数不接受负数值。
& lt; position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。
<强> 4,多边形()
多边形()函数定义了一个多边形
& lt; fill-rule>代表了填充规则(填充规则),即,如何填充该多边形。可选值为非零和evenodd。该参数的省缺值为非零。
<强>
基本形状函数中的值按指定计算,但有例外,如:
1,包含省略的值并计算其默认值。
2,一个& lt; position>值圆()或()椭圆计算为左上角原点的一对偏移(水平然后垂直),每个偏移作为绝对长度和百分比的组合给出。
3,一& lt; border-radius>中值插图()计算为所有八个的扩展列表& lt; length>或百分比值。
形状的引用框被定义为将这些形状作为值的属性的一部分。
<强>
对于在一个基本形状和第二个基本形状之间进行插值,将应用以下规则.shape函数中的值作为简单列表插入。列表值在可能的情况下插入为长度,百分比或计算。如果列表值不是这些类型之一但是相同(例如非零在两个列表中找到相同的列表位置),那么这些值会进行插值。
1,两种形状必须使用相同的参考框。
2,如果两个形状都是相同的类型,那个类型是椭圆()或者圈(),并且没有一个半径使用closest-side或farthest-side关键字,则在形状函数中的每个值之间进行插值。
3,如果两个形状都是类型插图(),则在形状函数中的每个值之间进行插值。
4,如果两个形状都是类型多边形(),则两个多边形具有相同数量的顶点,并且使用相同& lt; fill-rule>的形状函数中的每个值之间进行插值。
