重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS3中怎么绘制不规则图形
这篇文章给大家介绍CSS3中怎么绘制不规则图形，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
10年积累的成都做网站、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有瓜州免费网站建设让你可以放心的选择与我们合作。
声明图形
我们需要使用shape-outside 属性声明不规则图形。当前， shape-outside 属性只能被应用于浮动元素，并且只能应用于块级元素。如果需要在非块级元素上使用这些属性，必须先把元素声明为块级。
Shape-* 值有三种赋值方式: 自动，基本图形或者图片链接。如果被设置为自动，浮动元素将继续作为传统的盒模型进行渲染。如果你还不熟悉盒模型，请参考CSS盒模型，这是阅读本篇文章的基础。
绘制方法包括：rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通过链接查看详细的描述。
如果属性被设置为图片链接， 浏览器会按照图片的“alpha通道”来绘制图形形状。
在元素上创建坐标系
声明了CSS 图形之后，我们首先需要创建将用于绘制图形的坐标系。
坐标系是非常必要的，因为图形需要依据此坐标系上的点阵进行绘制。shape-* 属性是基于盒模型的，为了使它启作用，需要明确指定盒子的大小，限制不规则图形在盒子范围内，它也将被用于创建绘制坐标系，坐标系的起点位于形盒子左上角。如果没有明确宽和高声明， shape-* 属性将不启作用。
设置自定义图形的背景色
应用了自定义图形，它的盒模型仍然存在，其它传统的样式设置将作用于盒模型范围。例如，下面这个例子中，
我们仅仅想创建一个浮动圆形，并设置这个圆形的背景色。按照正常的思路理解，效果应该是这样的：
但是当设置了盒子的背景色后，你会发现和预期的效果不同，效果如下：
在上图中我们看到背景色被应用到盒模型范围，而不是我们预想的圆形内。
那么，我们应该怎样设置圆形的背景色呢？这就引出了一个新的CSS样式： clip-path 。clip-path 用于限制当前样式的作用范围。在下面的例子中你将看到它的使用方法。
提醒
现在，shape-outside 属性只作用域浮动的元素，并且仅限制于在块级元素上应用。使用这些属性定义的元素，其周围的文本将依赖于图形形状排布。未来的CSS 形状将不仅仅限制与应用于浮动元素上，我们将不仅仅可以在文本外部的图形上做文章，完全可以在其内部定义自定义图形，实现如下效果：
实例-使用shape-outside 创建环绕于自定义形状的浮动文本
我们从一个简单的例子开始。在实例中我们将创建一个自定义图形，并且内置文本流，最终效果图如下（文章末尾提供实例下载链接）：
例子中我们拥有两个容器，用于设置自定义形状和嵌套文本内容。代码如下：
CSS Code复制内容到剪贴板
La Tour
Eiffel
Lorem Ipsum.....
