一、形状 Shape
形状 Shape 的出现,打破了传统 CSS 中,只有矩形形状的尴尬,可以让我们的形状多元化。
用以下结构和样式为基础案例说明:
<div class="txtBox">
<div class="txtBox_content">
<p>
小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。
</p>
<p>
“小说”出自《庄子·外物》。
</p>
<p>
人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分,有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说(小小说)。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、爱情、家庭伦理篇、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
</p>
<p>
“小说”一词最早出现于《庄子·外物》:「饰小说以干县令,其于大达亦远矣。」庄子所谓的「小说」,是指琐碎的言论,与小说观念相差甚远。直至东汉桓谭《新论》:「小说家合残丛小语,近取譬喻,以作短书,治身理家,有可观之辞。」班固《汉书.艺文志》将「小说家」列为十家之后,其下的定义为:「小说家者流,盖出于稗官,街谈巷语,道听途说者之所造也。」才稍与小说的意义相近。而中国小说最大的特色,便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语,是一种小知小道的纪录。
</p>
</div>
</div>
*{ margin: 0; padding: 0;}
.txtBox{
width: 600px;
height: 600px;
background: #eee;
margin-right: auto;
margin-left: auto;
}
.txtBox_content{
width: 600px;
height: 600px;
background: #999;
}
1. 形状值
很多参考资料称之为 <basic-shape>
, 我更喜欢称之为形状值,因为它就是定义了一个形状,可以作为属性值用在 clip-path
或 shape-outside
属性上。
可能的数据有:
(1)inset()
inset()
函数在形状内部指定一个矩形区域。它的参数为4个偏移值,以及可选的圆角度数。
inset( <shape-arg>{1,4} [round <border-radius>]? )
以下都是正确的 inset() 的写法:
inset(10% 20% round 5px)
/*一个带5像素圆角的矩形,上下2条边向内10%,左右2条边向内20%*/
inset(15px 20px 30px) /* 上边距 左右边距 下边距 */
inset(25% round 10px 30px)
inset(10px 20px 30px 40px round 10px)
比如:
.txtBox_content{
clip-path: inset(10% 20% 10% round 10%);
}
(2)circle()
circle()
函数用于定义一个圆形。
circle() = circle( [<shape-radius>]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
<shape-radius>
参数用于指定圆形的半径。半径,也可以使用两个关键字来指定:closest-side
和furthest-side
。
<position>
参数用于指定圆的圆心,默认是正中心。
如果不指定参数,则是 closest-side
,且默认正中心。
以下都是正确的 circle() 的写法:
circle();
/* 使用默认值:圆形使用closest-side作为半径,圆形位于元素的中心 */
circle(100px at 30% 50%);
/* 圆形的半径为100像素,位于元素的水平30%,垂直50%的位置 */
circle(farthest-side at 25% 25%);
/* 圆形的半径为最远边的一半,位于元素的水平25%,垂直25%的地方 */
circle(10em at 500px 300px);
比如:
.txtBox_content{
clip-path: circle();
}
(3)ellipse()
ellipse()
函数用于定义一个椭圆形。
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* 其中... */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
它的参数和 circle() 函数相同。
<shape-radius>
参数用于指定椭圆形的半径。它可以指定2个半径值:rx 和 ry,分别代表椭圆的X轴半径和Y轴半径。
以下都是正确的 ellipse() 的写法:
ellipse()
/* 使用默认值 */
ellipse(100px 50px at 30% 50%)
/* 椭圆形的X轴半径100像素,Y轴半径50像素。圆心位于水平30%,垂直50%的地方 */
ellipse(farthest-side closest-side at 25% 25%)
/* 椭圆形的X轴半径为farthest-side,Y轴半径为closest-side。圆心位于水平25%,垂直25%的地方 */
ellipse(10em 10em at 500px 300px)
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素,垂直300像素的地方 */
比如:
.txtBox_content{
clip-path: ellipse(50% 20%);
}
(4)polygon()
polygon()
函数用于定义一个多边形。
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>
polygon()
的参数是一组坐标对(<shape-arg> <shape-arg>
),每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔,可以使用绝对单位或百分比单位值。
除了坐标对参数,polygon()
函数还可以使用一个可选的关键字 fill-rule
。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero
和evenodd
。默认值为nonzero
。
下面都是有效的polygon()
函数声明。
polygon(0 0, 100% 100%, 0 100%)
polygon(0 0, 100% 100%, 0 100%)
polygon(50px 0px, 100px 100px, 0px 100px)
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px )
比如:
.txtBox_content{
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}
2. 形状的应用:clip-path
clip-path ,裁剪属性,用于指定使用一个形状值、内联或外部的 SVG 路径作为剪裁路径对元素进行裁剪。
裁剪区域内的内容将会显示,而不在这个区域内的内容不会显示。
裁剪的元素可以是任何容器和图片元素。
/* SVG中的clipPath的使用 */
.element {
clip-path: url(#svgClipPathID);
}
/* 使用CSS中的基本图形函数 */
.element {
clip-path: polygon(...);
}
/* 或者其他的图形函数 */
基本形状在 clip-path
的使用见前面的案例。
这里举例说明下 SVG 的使用。
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<text x="0" y="300" textLength="600px" lengthAdjust="spacing" font-family="Vollkorn" font-size="100px" font-weight="700" font-style="italic">
White Mouse
</text>
</clipPath>
</defs>
</svg>
.txtBox_content{
clip-path: url(#svgTextPath);
}
3. 形状的应用:shape-outside
shape-outside 使用形状值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容(浮动元素)所包裹的形状。这将使得内联内容会环绕着形状,而不是围绕矩形环绕。
非浮动元素不能用。
可能的值:
/* 关键字值 */
shape-outside: none; /* 默认 */
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 形状值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
二、经典应用1:文字圆形环绕
有时候,需要让文字环绕图片排版。
这是常见的一种图文排版手法。CSS 中常用浮动来实现该效果。
<div class="box">
<div class="img">
<img src="images/4.jpg" width="300" height="300" alt="">
</div>
<div class="txt">
<p>
小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。
</p>
<p>
“小说”出自《庄子·外物》。
</p>
<p>
人物、情节、环境是小说的三要素。情节一般包括开端、发展、....
</p>
<p>
“小说”一词最早出现于《庄子·外物》:「饰小说以干县令,其于大达亦远矣。」....
</p>
</div>
<div class="clears"></div>
</div>
*{
margin: 0; padding: 0;
}
.clears{
clear: both; height: 0; overflow: hidden; line-height: 0; font-size: 0;
}
.box{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background: #f2f2f2;
}
.img{
width: 300px;
height: 300px;
overflow: hidden;
}
.txt{
font-size: 16px;
line-height: 2;
}
让图片部分浮动起来,即可实现文字环绕。
.img{
float: left;
margin:30px;
}
但是如果把图片部分变成圆形,文字还是围绕“矩形”环绕的。
.img{
float: left;
margin:30px;
border-radius: 100%;
}
要实现“圆形”环绕,需要使用 CSS3 的新属性 shape-outside,规定了文字环绕的形状。
.img{
float: left;
margin:30px;
border-radius: 100%;
shape-outside:circle(); /* 圆形环绕 */
}
三、经典应用2:任意形状环绕
同样道理,我们可以做出任意形状的文字环绕效果。
<div class="txtBox">
<div class="img">
<img src="images/fashion.jpg" alt="">
</div>
<div class="txt">
<p>
耀眼的金属光泽,独具匠心的外观设计,令宝诗龙的每一处都散发着不拘一格的时尚气息。
</p>
<p>
个性十足的林彦俊也对宝诗龙的饰品青眼有加,在七夕时分亲自演绎了宝诗龙的不凡魅力。
</p>
<p>
毫无疑问的,当它的光芒闪耀于脖颈和指间,你便是人群中当仁不让的视觉焦点。
</p>
<p>浪漫而性感 Giambattista Valli让繁花盛开</p>
<p>简单优雅 Stella McCartney打造都市独立女性</p>
<p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
<p>都市摩登女郎style LV用各种元素混搭</p>
<p>那些老佛爷给我们做的包包你有几个?</p>
<p>浪漫而性感 Giambattista Valli让繁花盛开</p>
<p>简单优雅 Stella McCartney打造都市独立女性</p>
<p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
<p>都市摩登女郎style LV用各种元素混搭</p>
<p>那些老佛爷给我们做的包包你有几个?</p>
</div>
<div class="clears"></div>
</div>
*{
margin: 0; padding: 0;
}
.clears{
clear: both; height: 0; overflow: hidden; line-height: 0; font-size: 0;
}
.txtBox{
margin-top: 50px;
}
.txtBox{
width: 1000px;
height: 687px;
background: #bda895;
margin-right: auto;
margin-left: auto;
}
.img{
float: left;
shape-outside: polygon(0 0,368px 0, 425px 226px, 463px 227px ,475px 355px,
558px 503px ,391px 596px, 440px 687px, 0 687px);
}
.txt{
color: #fff;
font-size: 20px;
line-height: 2;
padding-top: 30px;
padding-right: 30px;
}
形状的坐标可以用 PS 等工具,利用参考线,依次查找。
四、兼容性
shape 相关的样式兼容性还不错,除了 IE。现在也没人管 IE 了。