前端开发工程师-前端基础-CSS3_形状与剪辑路径.docx

PAGE1

PAGE1

CSS3基础形状

1圆形与椭圆的创建

1.1原理

在CSS3中，创建圆形或椭圆的基本方法是使用border-radius属性。对于圆形，我们通常设置所有边角的border-radius为50%，而椭圆则需要调整宽度和高度的比例，同时设置border-radius属性。

1.2代码示例

!--创建一个圆形--

divclass=circle/div

!--创建一个椭圆--

divclass=ellipse/div

.circle{

width:100px;/*设置宽度*/

height:100px;/*设置高度*/

background-color:red;/*设置背景颜色*/

border-radius:50%;/*设置所有边角的圆角为50%*/

}

.ellipse{

width:200px;/*设置宽度*/

height:100px;/*设置高度*/

background-color:blue;/*设置背景颜色*/

border-radius:50%;/*设置所有边角的圆角为50%*/

}

1.3描述

在上述示例中，我们创建了一个圆形和一个椭圆。圆形的宽度和高度相等，而椭圆的宽度是高度的两倍。border-radius:50%;确保了元素的边角被圆滑处理，从而形成了圆形或椭圆。

2多边形的创建

2.1原理

创建多边形通常涉及到使用clip-path属性，该属性允许我们定义一个形状，该形状将被用于裁剪元素。我们可以通过polygon()函数来定义多边形的顶点坐标。

2.2代码示例

!--创建一个三角形--

divclass=triangle/div

!--创建一个六边形--

divclass=hexagon/div

.triangle{

width:0;/*设置宽度为0，因为我们将使用clip-path来定义形状*/

height:0;/*设置高度为0*/

background-color:green;/*设置背景颜色*/

clip-path:polygon(50%0%,100%100%,0%100%);/*定义三角形的顶点坐标*/

}

.hexagon{

width:100px;/*设置宽度*/

height:86.6px;/*设置高度，计算公式为width*sqrt(3)/2*/

background-color:yellow;/*设置背景颜色*/

clip-path:polygon(50%0%,100%25%,100%75%,50%100%,0%75%,0%25%);/*定义六边形的顶点坐标*/

}

2.3描述

在上述示例中，我们创建了一个三角形和一个六边形。三角形的clip-path属性定义了三个顶点坐标，而六边形的clip-path属性定义了六个顶点坐标。值得注意的是，六边形的高度是根据宽度和六边形的几何属性计算得出的。

3基本形状属性的使用

3.1原理

CSS3提供了多种属性来创建和修改基础形状，包括border-radius、clip-path、transform等。这些属性可以单独使用，也可以组合使用，以创建更复杂和动态的形状。

3.2代码示例

!--创建一个旋转的椭圆--

divclass=rotating-ellipse/div

.rotating-ellipse{

width:200px;/*设置宽度*/

height:100px;/*设置高度*/

background-color:orange;/*设置背景颜色*/

border-radius:50%;/*设置所有边角的圆角为50%*/

animation:rotate2slinearinfinite;/*使用动画属性使椭圆旋转*/

transform-origin:centercenter;/*设置旋转中心*/

}

@keyframesrotate{

from{

transform:rotate(0deg);/*从0度开始*/

}

to{

transform:rotate(360deg);/*旋转到360度*/

}

}

3.3描述

在上述示例中，我们创建了一