CSS3 Shape详解

wangyp

发布于 2019.04.09 00:58 阅读 2937 评论 0

一、CSS Shapes简介

1.功能简介

CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。

该规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。

shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。

让文本在一个几何图形内呈现，使用的是CSS Shapes中的shape-inside属性。

2.浏览器支持

目前支持以下版本：

如果正使用Chrome浏览器（非Canary版本），可以粘贴以下代码到地址栏：

chrome://flags/#enable-experimental-web-platform-features

然后在“启用实验性网络平台功能”下点击“启用”，最后选择“立即重新启动”来重启浏览器，给其全新的CSS超级功能。

CSS shapes虽然支持的浏览器不多，但在CSS Shapes Module Level 1中已经达到候选推荐标准状态,所以规范中定义的属性和语法是相当稳定的。

在其他浏览器中实现的时间不会很久。这个级别侧重于使用形状属性，来改变一个环绕在某形状旁的内容流的布局。更具体地说,它关注的是shape-outside属性及其相关属性。

结合其他先进功能,如剪切和蒙版,CSS滤镜,合成和混合模式,CSS shapes 将使我们在无须诉诸做图软件（如photoshop或者indesign）的情况下，创造更多绚丽且复杂的设计。

二、怎样使用CSS Shapes

1.shape-outside属性

其在元素的周围定义一个与众不同的浮动区域。元素把围绕在它周围的文字流包裹成圆形、多边形或者椭圆形，而不只是矩形。它在元素的浮动盒子边界里裁剪好一个可以被文字环绕的新区域。

话不多说，先来个例子

HTML部分：


<div class="container">

  <h1>Laplanders</h1>

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-2.jpg" class="lapland" />

  <p>They can bend bows most easily that the most powerful Swedes or Norwegians could not bend at all. They dress,as you see, altogether in skins or coarse wool. The women dress very like the men, turning their hair up in a funny kind of knot.</p>

  <p>The children, when small, are slung at their mother's back. They live in huts, or more often tents, made of wood and covered with cloth, with a hole at the top to let the smoke out. These tents have two doors, one for the men and the other for the women, as it is considered unlucky to meet a woman on going out to hunt.</p>

  <p>When a young man and woman are engaged to one another, as often as the young man pays a visit to his betrothed, he has to bring a bottle of brandy for the father-in-law — an arrangement which the father-in-law likes so much, that he keeps his daughter engaged as long as he can ; and when the marriage takes place, the son-in-law has to remain a year and work for his wife's father - before he can go off to his own home.</p>

</div><!-- container -->

CSS部分：

@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/typeplate.css";

@import url(https://fonts.googleapis.com/css?family=Holtwood+One+SC|Quattrocento);

body {

  background: #990707;

  color: #ffffff;

  font-family: 'Quattrocento', serif;

}

h1 {

  color: #ffffff;

  font-family: 'Holtwood One SC', serif;

  font-size: 70px;

  font-weight: normal;

  padding-top: 10px;

  text-align: center;

}

.container {

  max-width: 600px;

}

.lapland {

  float: left;

  shape-outside: inset(1% round 45%);

  max-width: 400px;

  width: 70%;

}

来个特写：

shape-outside: inset(1% round 45%)让图片的转角变得与图形的自然边框半径很吻合；

Shape共有两种属性：

shape-outside 让文本围在图形外，和shape-margin属性一起使用
shape-inside把文本包装在形状的内部，和shape-padding一起使用

注意：shape-outside的四个形状函数在这篇文章末尾已有介绍。现在只给出对应的实例方便学习

· circle()--圆形

· ellipse()--椭圆

· inset()--矩形（内矩形）

· polygon()--多边形

(1)圆形:circle()函数

.circle 

{/* general styles for the div*/ 

width: 200px;

 height: 200px;

 background-color: #A4F4B0;

 border-radius: 50%; /* make it a shape!*/

 shape-outside: circle(); 

float: left; 

}

注意：closest-side使用从形状的中心到盒子参考模型的最近的边缘的距离作为半径，相反的，farthest-side使用到最远的边缘的距离。shape-radius如果为空默认值使用closest-side。

(2)椭圆:ellipse()函数

.ellipse { 

width: 100px;

 height: 200px; 

background-color: #A4F4B0;

 border-radius: 50%;

 shape-outside: ellipse();

 float: left; 

}

(3)矩形:inset()函数

.inset { 

width: 200px; 

height: 160px; 

background-color: #A4F4B0;

 border-radius: 50px; 

shape-outside: inset(0px round 50px);

 float: left;

}

注意：直接在元素上应用border-radius产生的圆角效果只是使元素边框和背景变成圆角矩形，并不能让文字按圆角浮动；

(4)多边形：plygon()函数

.polygon {

 width: 200px;

 height: 200px; 

clip-path: polygon(0 0, 0 200px, 200px 100px); 

background-color: #A4F4B0;

 shape-outside: polygon(0 0, 0 200px, 200px 100px); 

float:left; 

}

2.Shape的参考盒模型

CSS shapes 通过参考盒来定义并且创建,这个盒子用来绘制元素上的形状。除了元素的高度和宽度,元素的盒模型——margin box,content box,padding box,和border-box也作为指定元素形状的参考。

默认情况下,使用margin box盒模型作为参考,因此如果你想应用形状的那个元素底部有一个边距,你在元素上定义的那个形状将扩展到外边距的边缘,而不是元素的边缘。如果您想要使用另一种盒模型,您可以同时指定盒模型与形状函数,之后传递给形状属性:

shape-outside: circle(250px at 50% 50%) padding-box;

上面的规则中padding-box关键字表明，形状会适用于元素的padding box(padding 盒模型)。circle()函数定义了元素上形状为圆形，以及圆形的大小和位置。

三、CSS Shapes拓展

1.利用图片来定义一个形状

我们可以给shape-outside属性传一个url()函数。使用这个功能可以给其添加一个背景图像。在这个示例中，允许通过url()给shape-outside属性定义一个元素形状是基于图像的。

当你有一个特别复杂的形状，或者有很多曲线和点，你想让你的内容可以更好的围绕这个图形，这个时候，可以使用url()来替代polygon()。或者说，你定认形状非常棘手时，也可以考虑这样的方式。

首先，你需要创建一个带有透明度的图像：

把最初的鹦鹉图像当作的容器的背景图，添加到容器上：

.container { 

background-repeat: no-repeat;

 background-image: url('../img/parrot.png'); 

}

透明度的阈值

形状本身将添加到容器内的另一个元素上，这一次我们使用了另一个CSS属性shape-image-threshold。

.shape {

 shape-margin: 15px;

 shape-outside: url('../img/parrot-shape.png');

 shape-image-threshold: 0;

 }

这处属性定义了图像形状最低透明度的阈值，它可以是一个0到1之间的数字。所以，如果你想让你的图像具有一定的透明度，可以将其设置为0.8或0.5。如果设置其值为0，那么鹦鹉图像周边区域完全是透明的。

最后的效果看起来像这样：

完整代码：（建议使用Chrome浏览器）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鹦鹉</title>

<style type="text/css">

clearfix:before,

.clearfix:after {

  content: " ";

  /* 1 */

  display: table;

  /* 2 */

}



.clearfix:after {

  clear: both;

}





/**

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

  *zoom: 1;

}



body {

  font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;

  color: #66595c;

  background-color: #faf6ec;

}





/* Start the styles  */



blockquote {

  font-family: "Lucida Bright", Georgia, serif;

  font-style: italic;

}

blockquote {

  padding-top: 40px;

}

blockquote p {

  line-height: 1.6;

  color: #000;

  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.32);

}



.container {

  width: 600px;

  height: 900px;

  margin: 30px auto;

  background-image: url('https://lourfield.github.io/advanced-css-shapes/img/parrot.jpg');

  background-repeat: no-repeat;

}



.shape {

  width: 600px;

  height: 900px;

  float: left;

  shape-image-threshold: 0.5;

  shape-outside: url('https://lourfield.github.io/advanced-css-shapes/img/parrot-shape.png');

  shape-margin: 15px;

}

</style>

</head>



<body>

<div class="support-css-shapes"></div>



<div class="container clearfix">

  <div class="shape"></div>

  <blockquote>

    <p><strong>Parrots</strong>, also known as psittacines are birds of the roughly 393 species in 92 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea

      ("true" parrots), the Cacatuoidea (cockatoos), and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere, as well. The greatest diversity

      of parrots is in South America and Australasia.</p>

  </blockquote>

</div>

</body>

</html>

四、Shape工具

使用形状函数创建复杂的形状有可能非常艰难,特别是如果你通过许多的点和坐标，通过polygon()函数创建一个多边形时。

值得庆幸的是,Adobe的web平台团队一直致力于开发交互式工具使这更容易。贝尔特拉维斯已经创建了一个形状工具,使我们能够可视化的创建多边形形状。这个工具可以根据形状生成形状函数。这是非常有用的,但如果你想创建一个基于特定图像的形状就不可以了,因为这个工具不支持插入图像然后创建形状。

更先进，更富有交互力图形工具是由Adobe网络平台团队开发的。近日发布的工具作为Adobe免费的Brackets编辑器的扩展。它允许您可视化的在浏览器中直接编辑形状,并提供实时预览功能,当改变它们的形状时更新样式表的值。你的更改会有即时的视觉反馈,让你能够了解到你的形状是如何与页面上的其他元素进行交互的。

在浏览器中编辑多边形形状，并在右边使用bracket的实时预览模式来预览。

---部分论述及案例转载自W3cplus

发表评论