码迷,mamicode.com
首页 > 其他好文 > 详细

shapes 不规则边界

时间:2016-01-28 17:08:35      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

CSS基本形状都是矩形,CSS shapes允许开发者用定制的路径来包裹内容,例如圆形,椭圆,多边形等。

 
形状可以自定义也可以从图片中推断
 
从图片推断,例如可以让文字按照图片形状来浮动到一边:
技术分享
 技术分享
<img class=”element” src=”image.png” />  <p>Lorem ipsum…</p>

<style>.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;}</style>
shape-outside: url(image.png) 告诉浏览器从图片中提取相应的形状
 
shape-image-threshold  用来定义可以用来创建形状的最小透明度,这里为0.5也就是说,只有透明度在50%以上的像素才能用来创建shape
 
 
 
自定义: 使用这些方法:circle(), ellipse(), inset() and polygon()
 
例如椭圆形:
技术分享
技术分享
.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;}
 

shapes 不规则边界

标签:

原文地址:http://www.cnblogs.com/chuangweili/p/5166480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!