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;
}