PHPPresentation-PPT形状(shape)样式控制(Styles)

ill（填充）

使用此样式定义形状的填充，如下例所示。

$shape->getFill()
->setFillType(Fill::FILL_GRADIENT_LINEAR)
->setRotation(270)
->setStartColor(new Color('FFCCCCCC'))
->setEndColor(new Color('FFFFFFFF'));

Properties（属性）

• fillType 填充类型
• rotation 旋转
• startColor 起始颜色
• endColor 结束颜色

Border(边框)

使用以下样式定义形状的边框，如下例所示。

$shape->getBorder()
->setLineStyle(Border::LINE_SINGLE)
->setLineWidth(4)
->getColor()->setARGB('FFC00000');

Properties(属性)

• lineWidth 线宽
• lineStyle 线条样式
• dashStyle 虚线样式
• color 颜色

Shadow（阴影）

使用此样式定义形状的阴影，如下例所示。

$shape->getShadow()
->setVisible(true)
->setDirection(45)
->setDistance(10);

Properties(属性)

• visible 可见性
• blurRadius 模糊半径
• distance 距离
• direction 方向
• alignment 对齐
• color 颜色
• alpha 透明度

Alignment（对齐）

• horizontal 水平的
• vertical 垂直
• level 水平
• indent 缩进
• marginLeft 左外边距
• marginRight 右外边距

Font(字体)

• name 名称
• bold 粗体
• italic 斜体
• superScript 上标
• subScript 下标
• underline 下划线
• strikethrough 删除线
• color 颜色

Bullet(项目符号)

• bulletType项目符号类型
• bulletFont项目符号字体
• bulletChar项目符号颜色
• bulletNumericStyle数字项目符号样式
• bulletNumericStartAt数字项目符号起始编号

Color

颜色可以应用于不同的对象，例如字体或边框。

$textRun=$shape->createTextRun('Text');
$textRun->getFont()->setColor(new Color('C00000'));

本文为翻译内容：https://phppowerpoint.readthedocs.io/en/latest/styles.html

者按：在WWDC 2014之前我就打算把这篇文章翻译出来与大家分享；好在WWDC 2014上CSS Shape也露了一脸。快点阅读本文，了解初出茅庐的CSS Shape是何方神圣吧！

方框套方框：这就是目前网页的样子。长久以来，我们努力尝试使用CSS来创建几何形状来突破这种限制。但是这些形状无法影响其包含内容的形状。同样，元素的形状也无法被其他元素所影响。

2012年中旬，由Adobe提出的CSS Shape规范打破了这个限制。该规范的目标是为设计师提供一种新的方式，改变任意复杂形状周围或者内部内容布局。这些事情之情从来没有被实现过，JavaScript也没有。

例如，注意看在下面这个设计中文本环绕圆形图片的样子。没有形状的话，文本变成长方形——抛弃了精致的边缘，这种精致可不是把设计带到了下一个高度。

注意例子中文本是如何环绕圆形的那个碗的。通过CSS Shape，我们可以在网页上创建类似的设计。

接下来我们一起来看看Shape是如何工作，并开始使用它们。

浏览器支持

目前只有Webkit Nightly和Chrome Canary支持CSS Shape，但是它的Model Level 1已经是Candidate Recommendation（候选推荐）了，因此在规范中定义的属性和语法已经很稳定了。看来要不了多久其他浏览器也会实现CSS Shape。本Level的规范主要聚焦在几个Shape属性，这些属性主要规定了形状周围的内容该如何环绕。更具体地说，它主要聚焦在形状外围属性和其相关的属性。

结合其他一些最新的特性，例如Clipping与Masking、CSS Filters和Compositing与Blending，无需借助像Photosho或者InDesign这样 的图像编辑器，CSS Shape允许我们创造更漂亮更精致的设计。

新版的CSS Shape规范也会聚焦形状内部的内容。例如，现在可以很轻松地使用CSS创建一个菱形：只需把元素旋转45度，然后把元素里面的内容旋转回来，相对页面是横向的。但是其形状没法受到其容器菱形的影响，因此还是矩形的。如果CSS Shape的shape-inside属性实现了，我们就可以让内容也是菱形的，要实现下这图这样的布局就没什么不可能了。

很快，CSS Shape将支持定义内部文本的形状，比如这些菱形，与它的容器边缘保持一致，而不溢出或者被截断。

为了在Chrome Canary中使用CSS Shape，你需要开启试验特性标记。如果你不知道怎么打开，可以看看Adobe博客上的这篇参考。

创建CSS Shape

你可以使用Shape属性来给元素添加形状。你需要给Shape属性传递一个Shape函数。你可以给这个Shape函数传递参数来定义元素的形状。

可以使用下面这几个函数来定义形状：

• circle
• ellipse
• inset
• polygon

每个形状都由一组坐标定义。有些函数接受坐标点作为参数，另外一些接受偏移量——但是最终它们都把形状当做元素上一系列的点来描绘。在下面的例子中，我们将为大家讲解每个方法所接受的参数。

一个形状还可以通过提取图片的一个Alpha通道来定义。如果把一张图片传递给Shape属性，浏览器就会基于图片的临界值提取形状。形状的定义基于图片上每一个点的Alpha通道是否高于临界值。不过图片必须是CORS compatible的。无论何种原因（比如图片不存在），只要图片不能正常显示，就不会产生形状。

可接受上面这些函数作为值的Shape属性有：

• shape-outside：限制形状周围的内容
• shape-inside：限制形状内部的内容

可以把shape-margin和shape-outside属性结合使用，定义形状周围的margin，以此隔开浮动的内容和形状，在形状和内容之间留出更多的空间。与shape-outside和shape-margin对应一样，shape-inside有对应的shape-padding属性，用来添加内间距。

一行代码就可以使用Shape属性和函数来定义一个形状：

.element {
    shape-outside: circle; /* content will flow around the circle defined on the element */
}

或者：

.element {
    shape-outside: url(path/to/image-with-shape.png);
}

但是。。。

要让这行CSS生效，必须满足两个条件：

• 元素必须是浮动的。新版的CSS Shape可以循序我们定义一个非浮动元素的形状，但是现在还不行；
• 元素必须有确定的尺寸。元素的宽度和高度被用来建立这个元素上的坐标系统。

看上面函数的定义，形状都是由一组坐标定义的。因为这些点是坐标，所以需要坐标系统，这样浏览器才知道把这些点放在元素的什么位置上。因此，加上下面这段代码上面的例子就可以正常工作。

.element {
    float: left;
    height: 10em;
    width: 15em;
    shape-outside: circle;
}

给定固有的维数并不会影响响应性（随后我们进行更深入的探讨）。

既然形状是由一系列带坐标的点定义的，那更改这些点的坐标就可以相应的更改形状。举个例子，下面的六边形是使用polygon这个方法创建的。整个形状由六个点构成。更改黄点的横坐标将会影响产生的形状，应用了此形状元素的内部或者外部的内容布局方式也会受到影响。

如果元素右浮动，且应用了这个形状，当在polygon函数中黄点的横坐标变化的时候，在元素左侧的内容的浮动方式也会改变。

Shape的Reference Box

CSS Shape在一个Reference Box（参考框）里被定义和创建，这个Box用来绘制在元素上的形状。除了元素的宽高之外，元素的和模型——外边界Box、内容Box、内边界Box和边框Box——也会作为元素上形状大小的参考。

默认把外边界Box作为参考——因此，如果你应用了形状的元素的底部有外边界，则形状会延伸到外边jie上，而不是元素的边框区域。如果你想使用其他Box值，你可以在形状函数之后指定，然后传递给Shape属性。

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

上面这条规则中的padding-box关键字，把形状限定在了元素的内边框Box中。circle函数定义了一个环状的形状，包括这个形状的大小和在这个元素上的位置。

使用Shape函数定义Shape

我们从把信息环绕在圆形的头像上开始，我们常常在用户信息或者推荐中用到。

使用CSS Shape，让文本环绕圆形的用户头像。文本将不再是长方形的。

使用circle函数给头像添加一个圆形：

<img src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg" alt="profile image" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>

<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>

你可能会问，“为什么不使用border-radius来做出图片的圆角？”答案就是border-radius无法影响元素周围或者内部的内容的布局。它只能影响元素的边框和背景。背景区域会被裁剪成圆角，但是它功能仅限于此。元素内部的内容任然是矩形的，而且周围的内容还是把元素当做一个矩形的存在——本质上它还是。

我们使用border-radius让图片变圆——我们通常都是这样让图片等其他元素变圆的。图片bian'yuan

img {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 15px;
}

不添加CSS Shape，文本任然把图片当做矩形的，因此还是围绕成一个矩形，而不是圆的。

在不支持CSS Shape属性的浏览器中，原型图片周围的内容就像环绕在一个不是圆形的图片周围。这就是在较老浏览器中CSS Shape降级的效果。的

为了改变内容布局以适应特定的形状，我们使用Shape属性：

img {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;

    shape-outside: circle;
    shape-margin: 15px;
}

有了这些代码，文本会看到一个圆的形状在图片上，环绕之，就像第一张截图那样（你可以在这里看到）。在不支持的浏览器中，将降级为第二张图显示的哪样。

你可以像上面那样使用circle函数，也可以传递参数给它。下面是它的语法：

circle=circle( [<shape-radius>]? [at <position>]? )

问号标示这些参数是可选的。省略的参数将会被浏览器使用默认值补全。如果你直接使用circle而未指定圆形的位置，它会定义一个放在元素正中间的圆形。

你可以指定圆形的半径，什么单位都可以（px、em、pt等等）。你甚至可以指定使用closest-side或者furthest-side作为半径，closest-side是默认值，即浏览器会把从中点到最近边的长度作为圆形的半径。furthest-side则是使用中心到最远边的距离。

shape-outside: circle(farthest-side at 25% 25%); /* defines a circle whose radius is half the length of the longest side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/

shape-inside: circle(250px at 500px 300px); /* defines a circle whose center is positioned at 500px horizontally and 300px vertically, with a radius of 250px */

eclipse函数与circle还是函数是一样，除了接受两个半径参数以外（后者是一个参数列表）——一个是x轴的半径，一个是y轴的——是一直的。

ellipse=ellipse( [<shape-radius>{2}]? [at <position>]? )

与circle和eclipse没有直接的关系，inset函数再元素内部创建一个矩形。既然元素本身就是矩形的，我们当然不需要更多的矩形。inset实际上可以帮助我们在元素内部创建一个带有圆角的矩形。文本内容可以环绕在圆角周围。

inset函数接受1到4个值指定从参考Box边缘向内的距离。这可以控制这个矩形在元素内部的位置。这个函数还接受一个可选参数，设置内部矩形的圆角。且圆角的设置于border-radius的方法一致，使用一到四个值，于关键字round结合在一起。

inset=inset( offset{1,4} [round <border-radius>]? )

在一个浮动的元素中创建一个带圆角的矩形：

.element {
    float: left;
    width: 250px;
    height: 150px;
    shape-outside: inset(0px round 100px) border-box;
}

在这里查看实际的例子。

最后一个Shape函数是polygon，它可以是用任意数量的点来定义更加复杂的形状。这个函数接受一系列的坐标，每个坐标定义多边形的一个边角，合在一起组成整个图形。

在下面的例子中，一张右浮动的图片使用viewport单位，占满了整个屏幕。我们希望左侧的文本可以沿着图片内部的沙漏浮动，因此，我们使用polygon函数在图片上定义了一个不规则的的图形。

图片的CSS：

img.right {
    float: right;
    height: 100vh;
    width: calc(100vh + 100vh/4);
    shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

你可以使用长度单位或者百分比来定义边角的坐标，我使用的是百分比。

这段代码就是显示出图片的效果，你可以看到，Shape函数无法影响形状外的图片。事实上，一个形状除了影响内容的浮动之外无法对元素造成其他任何影响，不管这个元素是图片还是容器或者其他的什么。

为了让我们创建的多边形更有存在感，我们需要把形状之外的图片抠掉。这就需要CSS Masking模块的clip-path属性来帮忙了。

clip-path属性接受同样的Shape函数和参数座位形状属性。如果我们把传递给shape-outside的多边形传递给clip-path属性，它会把形状之外的图片全部抠掉。

img.right {
    float: right;
    height: 100vh;
    width: calc(100vh + 100vh/4);
    shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
    /* clip the image to the defined shape */
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

看效果：

目前，使用clip-path还需要使用前缀，这个例子clip-path使用了-webkit-前缀，因此可以在Chrome中工作，你点击查看demo。

clip-path属性确实是Shape属性的好伙伴，因为它可以帮助凸显被创建的形状，抠掉元素上所有不再形状内部的部分。你自然会经常发现把clip-path个Shape属性结合使用。

polygon函数还接受一个可以可选的参数fill，有两个值，nonzero和even odd。指明如何对待多边形自己内部的交错区域。更多信息可以查看SVG fill-rule。

使用图片定义Shape

使用图片来确定一个形状，需要用到这张图片的alpha通道，浏览器可以据此提取出图形。

像素的alpha通道的值是否超过某个临界值，这是定义形状的依据。默认的临界值是0.0（完全透明），你也可以通过shape-image-threshold属性来定义。因此，所有不透明的像素点都是形状的一部分。

有可能，新版的CSS Shape不但可以使用alpha通道，还可以使用亮度。果真如此的话，shape-image-threhold将被扩展，支持亮度或者alpha通道，基于不同状态间的切换。

我们将使用下面这张图，定义元素的形状，让文本环绕之：

使用shape-outside属性，传递一个url值，指向我们想要的图片。

.leaf-shaped-element {
    float: left;
    width: 400px;
    height: 400px;
    shape-outside: url(leaf.png);
    shape-margin: 15px;
    shape-image-threshold: 0.5;
    background: #009966 url(path/to/background-image.jpg);
    mask-image: url(leaf.png);
}

当然，如果元素有背景图片的话，需要把形状之外的部分去掉。不过clip-path无法接受一张带透明度的图片座位参数，我们 可以使用Masking Module的mask-image（需要对应的前缀）属性来实现。看看效果：

如果你需要创建一个复杂的形状，推荐你使用图片来定义。你可以通过Photoshop来定义alpha通道，比起手动指定定点方便多了。

还有，如果你元素上又多个浮动或者多个被排除的区域，你更愿意使用图片而不是形状。因为，至少是现在，你无法在一个元素上定义多个形状。但是如果图片包含多个区域，浏览器可以把这些区域提取出来并使用之。

响应式设计中的CSS Shape

CSS Shape可以适应响应式布局么？在目前的规范中，shape-outside已经可以满足了。因为它允许你使用百分比或者其他长度单位来指定元素的尺寸，而且形状也可以使用百分比（即形状函数的参数接收百分比）来定义。这意味着带着shape-outside的元素可以是响应式的，与其他使用百分比尺寸实现伸缩的方式没什么区别。

不过shape-inside还不是响应式的，原因是它被推迟到了Module Level 2中。当前版本中不尽人意的地方将在下一版本中解决。

Shape工具

使用Shape函数创建复杂形状令人生畏，尤其是使用ploygon使用很多点很多左边来创建形状。这要感谢Adobe的Web平台开发组正在开发一个可交互的工具简化这个工作。Bear Travis已经创建了一组Shape工具，帮助我们可视化地创建形状，并帮助我们生成Shape函数，这很有用，但是它也有局限，在你想基于一张图来创建形状时，因为目前你没法往工具中插入一张图，然后为它创建一个形状。

Adobe Web平台开发组开发出了一个更高级，交互式的Shape工具。这个工具最近作为Brackets编辑器的一个插件公布出来，Brackets编辑器是Adobe团队打造的一个免费编辑器。它允许你直接在浏览器中可视化地编辑图形，还包含一个预览版的功能——在你在页面上编辑图形的同时，更新编辑器中的样式表。这给你提供了直接视觉反馈，可以让你看到你的形状是如何与页面上的其他元素交互的。

使用Brackets的预览模式，在右边的浏览器中编辑多边形。截图由Razvan Caliman提供。

这个工具不可或缺，因为它大大简化了形状的创建、编辑和调试。 Razvan Caliman再Brackets的博客上发布了一篇文章，说明如何再Brackets中使用Shape编辑器。

未来：CSS Exclusion

CSS Shape规范实际上包括CSS Shape和Exclusion两个草案，不过这两个草案是分开的。CSS Shape定义shape-inside和shape-outside属性，而CSS Exclusion则定义那些允许文本环绕在非浮动元素周围的属性。这些元素可能是绝对定位的元素。这使得内容从四面八方环绕真个形状成为可能，就如下面这张图所示：

将来，CSS Exclusion允许我们像引文一样让文本环绕着形状，如这张杂志的布局所示。引文甚至可以是圆形的，文本也可以很好的环绕在它周围。图片来自Justin Thomas Kay。

类似的布局，具有形状的元素绝对定位在文本在中间——四面都有文本环绕——将来也没什么不可能。

将来的CSS Shape

目前的CSS Shape规范只是第一步，很快，会有新的选项，我们有更多的控制，创建形状，让文本填充在形状里面，或者环绕在其四周。让模型到活的设计更加方便，只需要简单的几行代码就行。目前，草案编辑把注意力放在发布shape-outside上，到2014年底，你将会看到有更多的浏览器支持CSS Shape。

现在你就可以使用CSS Shape，作为渐进增强的一部分，确保在不支持的浏览器中可以优雅的降级。我最近开始把它们用在我自己的网站上，降级很”正常”。对于更加复杂的设计，你可以使用脚本来检测浏览器是否支持Shape，提供降级方案。你也可以使用这段脚本扩展Modernizr的测试集，来测试浏览器是否支持shape-outside，也可以直接下载一份自定义的包含了这个测试的版本。

CSS Shape填平了印刷排版和Web设计之间的沟壑。本文中的示例都很简单，不过你应该学到的这些基础，有助于你实现像杂志或者海报一样复杂的设计——无需担心你还需要针对屏幕重新设计。无论你在寻找什么——从非矩形布局到Shape动画——马上开始实验吧。

原文：CSS Shapes 101 · An A List Apart Article

— 完 —

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义 CSS 变量，自定义主题颜色。

布局

布局 其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图，而这里，我们就只是最简单的布局方式，从上而下：

1、优惠券金额和过期时间

2、优惠券描述

3、按钮（其实按钮也可以放到“2”里面去）

这样分析，我们就有了 html 架构了

<div class="coupon">
  <!-- 1、优惠券金额和过期时间 -->
  <div class="price">
    100元
    <span>优惠券</span>
    <p class="timeout">2020-12-31 18:18:18过期</p>
  </div>

  <!-- 2、优惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、过期作废</p>
  </div>

  <!-- 3、按钮 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理，我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

这里用到了 径向渐变，不清楚用法的小伙伴可以看看语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注释：

（1）、shape 确定圆的类型:

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

（2）、size 定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

（3）、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

（4）、start-color, ..., last-color 用于指定渐变的起止颜色。

这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用 径向渐变 的方式实现：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

伪类元素 ::after 设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。

其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

当然也有缺陷，间隔位置不好控制

2、优惠券描述与按钮 优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按钮样式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主题颜色

大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在 .coupon 类选择器里面的。这样的原因是：

1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主题使用

ok，我们就可以copy 多个 优惠券，并给每个添加一个不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下来我们就为不同主题定义不同的颜色变量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色（红色）。

小结

今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。