图解CSS形状Shapes

CSS的高级特效----形状（Shapes）

CSS Shapes包含两组属性，shape-outside 和 shape-inside。 （但本文不涉及讲shape-inside）

shape-outside 有四个形状函数( 只能应用给浮动元素 )

：circle（） ----圆形

：ellipse（） ----椭圆形

：polygon（） ----多边形

：inset（） ----嵌入在盒子边界内的矩形，也可以指定圆角

circle（） 圆形与 ellipse（） 椭圆的 语法：

circle（）：接受 一个半径一个位置值circle（r1 at x y）----如传入如果位置传入一个值则以元素左上角原点圆心为x轴方向的x位置，y轴方向默认为元素的50%

ellipse（）：接受 两个半径值和一个位置值ellipse（r1 r2 at x y）----位置的传值与圆形一致

下面是html代码

<div>
	<div><div>
	<p>此处很多文字</p>
</div>

然后是 给div添加浮动和形状函数,下图为谷歌调试及对应效果

inset（） 需传入一组长度值，分别是上，右，下，左边的距离，很像margin和padding简写，此外可以通过round关键字指定圆角，随后是半径，与border-radius类似

如下例子，给div添加下面样式

.inset{
	/*距离外部盒子的上，下各50px
	 *距离外部盒子的左，右各50px
	 *还有半径为20px的圆角*/
    shape-outside: inset(50px 50px round 20px);
	width: 200px;
    height: 200px;
    background-color: pink;
    float: right;
}

polygon（） 此函数相对比较复杂一些，这个函数接受一系列的坐标对，用于在盒子表面指定多个点，坐标相对盒子的左上角，最终把各个点连接起来就是要创建的形状

创建多边形最方便方式是使用CSS Shapes Editor插件,它支持Chrome和Opera。而且会在检查形状元素时给出预览。也可以通过创建并拖动控制点来创建新形状

.polygon {
	width: 200px;
    height: 200px;
    background-color: pink;
    float: right;
    shape-outside: polygon(100% 99%, 3% 90%,11% 80%,3% 70%,43% 30%); 
}

多边形中每个点的坐标以百分比表示，这样可以保证最大的灵活度。

形状图片

可以直接在图片的源文件上基于透明度来创建形状

.url {
	width: 700px;
    height: 200px;
    float: right;
    shape-outside: url(./images/saturn.png);
}

注意: 只通过浏览器打开HTML文件是不行的，必须通过Web服务器取得这个页面，这样引用的图片才会带有合适的HTTP首部信息，告诉浏览器该图片与CSS来自同一个域。这种安全机制是较新的浏览器才有的，是为了防止引用的文件对你的计算机造成危害。

shape-image-threshold： 默认情况下，形状轮廓会沿图片完全透明区域的边缘生成的，可以通过这个属性修改，默认值是0.0（完全透明），最大值为1.0，比如修改上图的不透明度阈值（临界值）为0.9，则图片中半透明部分不再被包含在形状内

.url {
	width: 700px;
    height: 200px;
    background-color: pink;
    float: right;
    shape-outside: url(./images/saturn.png);
    shape-image-threshold: 0.9;
}

原图图片中半透明的部分生成形状时被忽略了，显示的高不透明度

盒子形状与边距

：border-box

除了使用形状函数或者图片外，还可以使用border-radius来创建圆形，但仅有圆角边框不能生成形状，还得通过shape-ouside属性告诉浏览器，以border-box作为生成形状的依据。

<!-- html代码 -->
<img src="./images/sum.jpg" alt="">
<p>此处很多文字</p>

/*img样式*/
img {
	float: right;
	border-radius: 50%;
	shape-outside: border-box;
}

：margin-box

使用shape-outside：margin-box；给上图的球体周围添加边距；

img {
	float: right;
	border-radius: 50%;
	shape-outside: margin-box;
	margin: 2em;
}

shape-margin:

如果想给形状复杂的图片添加外边距，可以使用shape-margin这个属性用于给整个形状添加外边距，与创建形状的方法无关

<!-- html代码 -->
<div class="url"></div>
<p>此处很多文字</p>

/*css样式*/
.url {
	width: 700px;
    height: 200px;
    float: right;
    shape-outside: url(./images/saturn.png);
    shape-margin: 1em;
}