我正在参加「AdminJS·启航计划」
常规情况下我们做文字环绕效果,文字通常只能围绕在图片的周围,而且文字的位置是固定的,这样的效果明显很僵硬,而且不够灵活,今天我们就来自定义一个文字浮动区域,让文字动起来,效果更加棒。
先看效果:
文字环绕
我们先来看一下文字环绕的效果,先上代码:
<div%20class="wrap">
%20%20%20%20<img%20src="#"%20alt="">
%20%20%20%20<p>
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20%20%20%20%20这里有一大堆文字
%20%20%20%20</p>
</div>
<style>
%20%20%20%20.wrap%20{
%20%20%20%20%20%20%20%20width:%20300px;
%20%20%20%20}
%20%20%20%20.wrap%20img%20{
%20%20%20%20%20%20%20%20width:%20100px;
%20%20%20%20%20%20%20%20height:%20100px;
%20%20%20%20%20%20%20%20float:%20left;
%20%20%20%20}
</style>
这样就得到了下面的效果:
可以看到的是,文字环绕在图片的周围,这个就是文字环绕的效果,但是这个效果不是很好,能不能让文字环绕到图片的任意位置呢?答案是可以的,下面我们就来实现这个效果。
shape-outside
在实现这个效果之前我们先来认识一个属性shape-outside
,这个属性可以让元素的外形围绕在指定的形状之外;
我们先来看一下shape-outside
的属性介绍:
shape-outside
用来指定一个元素的外形围绕在指定的形状之外,这个形状可以是一个基本形状,也可以是一个图片,也可以是一个盒子,也可以是一个渐变。
shape-outside =
none |
[ <basic-shape> || <shape-box> ] |
<image>
<shape-box> =
<box> |
margin-box
<image> =
<url> |
<gradient>
<box> =
border-box |
padding-box |
content-box
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
这些都是啥呀,看不懂,不想看,我就想用,那就直接上代码:
.wrap img {
width: 100px;
height: 100px;
shape-outside: circle(25px at 50px 50px);
float: left;
}
可以看到文字环绕到图片里面了,这个效果没啥可以说的,我们来看看代码做了什么;
就是加了一行shape-outside: circle(25px at 50px 50px);
,这个就是应用到circle
这个基本形状,25px
是半径,50px 50px
是圆心的位置,这样就实现了文字环绕到图片里面的效果。
上面使用的circle
函数就是一个<basic-shape>
;
<basic-shape>
是基本形状,包括circle
、ellipse
、inset
、polygon
;
对于这些不是很熟悉没关系,了解即可:
circle
:圆形ellipse
:椭圆形inset
:内嵌polygon
:多边形
也就是说文字环绕可以使用这些基本形状,我们直接来看一下多边形的效果:
.wrap img {
width: 100px;
height: 100px;
shape-outside: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
background-color: #ccc;
float: left;
}
可以看到文字环绕成一个五角星的效果,为了显示效果我加上了clip-path
属性,这个属性可以裁剪元素的形状,这样就可以更加清晰的看到效果。
<shape-box>
是指定一个盒子,这个盒子可以是border-box
、padding-box
、content-box
;
这个属性值可以通过box-sizing
属性来理解,box-sizing
属性可以设置元素的盒模型,有两个值:
content-box
:默认值,元素的宽高只包含内容的宽高border-box
:元素的宽高包含内容的宽高和内边距和边框的宽高
而它多了一个属性值为padding-box
,意思就是围绕着这个盒子的内边距来围绕;
我们来看一下padding-box
的效果:
.wrap img {
width: 100px;
height: 100px;
shape-outside: padding-box;
border: 10px solid #ccc;
padding: 10px;
background-color: #ccc;
float: left;
}
可以看到文字环绕在图片的内边距里面,这个效果应该很少有人会用到,但是这个属性值还是可以了解一下的。
<image>
是指定一个图片,这个图片可以是一个url
,也可以是一个gradient
;
这个就非常有趣了,如果我们用图片来做文字环绕的效果,这里我没有准备图片,所以直接用渐变来做演示,如果你有图片可以直接用图片来做演示;
图片的效果就是计算图片的透明的地方,然后文字环绕在图片的透明的地方;
而渐变也是同理,透明的地方会被文字填充,如下:
.wrap%20img%20{
%20%20%20%20width:%20100px;
%20%20%20%20height:%20100px;
%20%20%20%20shape-outside:%20repeating-linear-gradient(-45deg,%20transparent,%20transparent%202em,%20#ccc%202em,%20#ccc%204em);
%20%20%20%20background-image:%20repeating-linear-gradient(-45deg,%20transparent,%20transparent%202em,%20#ccc%202em,%20#ccc%204em);
%20%20%20%20float:%20left;
}
可以看到的是文字环绕在渐变的透明的地方,这个效果也是非常有趣的,但是遗憾的是并不能见缝插针,而是只会环绕在元素的四周,但是也是可以做很多有趣的效果的,例如:
.wrap img {
width: 300px;
height: 300px;
shape-outside: repeating-linear-gradient(#ccc, #ccc 1em, transparent 1em, transparent 2.5em);
background-image:
repeating-linear-gradient(aquamarine, aquamarine 1em, transparent 1em, transparent 2.5em),
repeating-linear-gradient(90deg, rosybrown, rosybrown 1em, transparent 1em, transparent 2em);
line-height: 2em;
float: left;
}
一格一格的文字效果也是可以的,让人感觉到非常有趣。
总结
这篇文章主要介绍了shape-outside
属性,这个属性可以让文字环绕在元素的周围,这个属性值可以是<basic-shape>
、<shape-box>
、<image>
,这个属性值可以让我们做很多有趣的效果;
这篇文章只是简单的介绍了一下shape-outside
属性,如果你想了解更多的话,可以参考MDN。