shape-outside
的CSS属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。默认情况下,内联内容包围其边距框
基本用法
关键字值
- margin-box
- content-box
- border-box
- padding-box
这几个关键字值就是表示该形状的边界是盒子模型的哪一层
如果使用box-sizing
属性也可以达到相同的目的
图形函数值
可以使用图形函数
circle([<shape-radius>]? [at <position>]?)
- 圆形,这个函数接受两个参数,均为可选
第一个参数表示圆的半径(负值无效),第二个参数表示圆心的定位(注意圆心定位前需要加at关键字)1
2
3
4
5
6
7
8
9
10
11
12.container {
background: #ccc;
overflow: auto;
font-size: 12px;
}
.container > .inner {
background-color: white;
height: 100px;
width: 100px;
float: left;
shape-outside: circle(50% at 20px 30px);
}ellipse([<shape-radius>{2}]? [at <position>]?)
- 椭圆形
这个函数与circle非常类似,差别就是shape-radius如果指定,需要指定两个值,分别表示X轴方向的半径和Y轴方向的半径inset(<shape-arg>{1,4} [round <border-radius>]?)
- 矩形
前四个参数分别代表了插进的长方形与相关盒模型的上,右,下与左边界和顶点的偏移量。这些参数遵循边际速记语法(the syntax of the margin shorthand),所以给予一个、两个、或四个值都能设置四个偏移量。
round后跟随的值表示圆角弧度边际速记语法:1个值表示上下左右;2个值分别表示上下、左右;3个值表示上、左右、下,4个值表示上、右、下、左。
比如margin和padding的值使用的都是这种规则polygon([<fill-rule>,]? [<shape-arg> <shape-arg>]#)
- 多边形
fill-rule有nonzero | evenodd
两个值,用于指定确定点在内部和外部的规则,每一对sharp-arg的值代表一个多边形顶点坐标
例如1
2
3
4.container > .inner {
/* 省略其他无关属性 */
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
}
使用图片形状
通常使用PNG图片,因为这种图片允许透明像素,如果是JPG这种只能是矩形的,也就没有什么意义了
根据图片的非透明区域进行包裹
1 | .container > .inner { |
实际使用的是该图片的轮廓,这个属性并不会使图片显示出来,如果要看到图片,还需要配合background属性
用于盒子内部
该属性是用于指定当前元素外部的形状,如果要在内部使用,就需要进行一些变通
在内部添加DOM结构进行占位,可以使用实体DOM,也可以使用伪元素
1 | <div class="circle"> |
1 | .circle { |