关于css shape的实现
有时候我们看见过文字环绕图片的效果，怎么通过css实现相关效果，今天介绍一个css方法给大家，那就是css shape。
CSS shape 的属性定义
.elem{
float: left;
height: 10em;
width: 15em;
shape-outside: circle();
}
我们可以使用以下形状函数：
1.circle(); <circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
2.ellipse(); <ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
3.inset(); <inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
4.polygon(); <polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
实现举例1
.shaped-element {
float: left;
width: 200px;
height:250px;
shape-outside:circle(100px at 50% 50%);
shape-margin:20px;
background:url(http://ogodoej04.bkt.clouddn.com/image_large.svg) no-repeat center;
background-size:100% auto;
}
每一个形状是都是由一组点定义的。有些函数把点作为参数,另外一些则采用偏移量–最终他们都会在元素上绘制一个由一组点组成的形状。
强调tip:要让CSS生效，必须满足两个条件：
1.元素必须是浮动的。
2.元素必须有确定的尺寸。
我们还可以使用图片定义shape:
向shape-outside属性，传递一个url()值，指向我们想要的图片。图像需要一个alpha通道才可以让浏览器提取形状。
当图像内像素的alpha值大于某个阈值。这个阈值默认值为0.0(完全透明),或者你可以直接使用shape-image-threshold属性。因此,图像中任何不透明的像素，都会被用来定义形状。如果有这种情况,shape-image-threshold将根据开关状态，来确定alpha通道或亮度的阈值。
当然,如果你要把图片形状作为元素背景,那图像中形状之外的需要被裁减掉。你可以使用mask-image属性(用适当的前缀)做到这一点,因为clip-path属性并不能接收一个alpha图片作为值。
实现举例2
.shaped-element {
float: left;
width: 192px;
height: 65px;
shape-outside: url(http://pic05.babytreeimg.com/img/header_footer/logo-201610.png);
shape-margin: 15px;
shape-image-threshold: 0.5;
background: #009966;
mask-image: url(http://pic05.babytreeimg.com/img/header_footer/logo-201610.png);
}
最后给大家一个demo，可以参考。
