CSS3 Shape详解_css shape-outside-程序员宅基地

一、CSS Shapes简介

1.功能简介

CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。

该规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。

shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。

让文本在一个几何图形内呈现，使用的是CSS Shapes中的shape-inside属性。

2.浏览器支持

目前支持以下版本：

如果正使用Chrome浏览器（非Canary版本），可以粘贴以下代码到地址栏：

chrome://flags/#enable-experimental-web-platform-features

然后在“启用实验性网络平台功能”下点击“启用”，最后选择“立即重新启动”来重启浏览器，给其全新的CSS超级功能。

CSS shapes虽然支持的浏览器不多，但在CSS Shapes Module Level 1中已经达到候选推荐标准状态,所以规范中定义的属性和语法是相当稳定的。

在其他浏览器中实现的时间不会很久。这个级别侧重于使用形状属性，来改变一个环绕在某形状旁的内容流的布局。更具体地说,它关注的是shape-outside属性及其相关属性。

结合其他先进功能,如剪切和蒙版,CSS滤镜,合成和混合模式,CSS shapes 将使我们在无须诉诸做图软件（如photoshop或者indesign）的情况下，创造更多绚丽且复杂的设计。

二、怎样使用CSS Shapes

1.shape-outside属性

其在元素的周围定义一个与众不同的浮动区域。元素把围绕在它周围的文字流包裹成圆形、多边形或者椭圆形，而不只是矩形。它在元素的浮动盒子边界里裁剪好一个可以被文字环绕的新区域。

话不多说，先来个例子

HTML部分：


<div class="container">

  <h1>Laplanders</h1>

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-2.jpg" class="lapland" />

  <p>They can bend bows most easily that the most powerful Swedes or Norwegians could not bend at all. They dress,as you see, altogether in skins or coarse wool. The women dress very like the men, turning their hair up in a funny kind of knot.</p>

  <p>The children, when small, are slung at their mother's back. They live in huts, or more often tents, made of wood and covered with cloth, with a hole at the top to let the smoke out. These tents have two doors, one for the men and the other for the women, as it is considered unlucky to meet a woman on going out to hunt.</p>

  <p>When a young man and woman are engaged to one another, as often as the young man pays a visit to his betrothed, he has to bring a bottle of brandy for the father-in-law — an arrangement which the father-in-law likes so much, that he keeps his daughter engaged as long as he can ; and when the marriage takes place, the son-in-law has to remain a year and work for his wife's father - before he can go off to his own home.</p>

</div><!-- container -->

CSS部分：

@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/typeplate.css";

@import url(https://fonts.googleapis.com/css?family=Holtwood+One+SC|Quattrocento);

body {

  background: #990707;

  color: #ffffff;

  font-family: 'Quattrocento', serif;

}

h1 {

  color: #ffffff;

  font-family: 'Holtwood One SC', serif;

  font-size: 70px;

  font-weight: normal;

  padding-top: 10px;

  text-align: center;

}

.container {

  max-width: 600px;

}

.lapland {

  float: left;

  shape-outside: inset(1% round 45%);

  max-width: 400px;

  width: 70%;

}

来个特写：

shape-outside: inset(1% round 45%)让图片的转角变得与图形的自然边框半径很吻合；

Shape共有两种属性：

shape-outside 让文本围在图形外，和shape-margin属性一起使用
shape-inside把文本包装在形状的内部，和shape-padding一起使用

注意：shape-outside的四个形状函数在这篇文章末尾已有介绍。现在只给出对应的实例方便学习

· circle()--圆形

· ellipse()--椭圆

· inset()--矩形（内矩形）

· polygon()--多边形

(1)圆形:circle()函数

.circle 

{/* general styles for the div*/ 

width: 200px;

 height: 200px;

 background-color: #A4F4B0;

 border-radius: 50%; /* make it a shape!*/

 shape-outside: circle(); 

float: left; 

}

注意：closest-side使用从形状的中心到盒子参考模型的最近的边缘的距离作为半径，相反的，farthest-side使用到最远的边缘的距离。shape-radius如果为空默认值使用closest-side。

(2)椭圆:ellipse()函数

.ellipse { 

width: 100px;

 height: 200px; 

background-color: #A4F4B0;

 border-radius: 50%;

 shape-outside: ellipse();

 float: left; 

}

(3)矩形:inset()函数

.inset { 

width: 200px; 

height: 160px; 

background-color: #A4F4B0;

 border-radius: 50px; 

shape-outside: inset(0px round 50px);

 float: left;

}

注意：直接在元素上应用border-radius产生的圆角效果只是使元素边框和背景变成圆角矩形，并不能让文字按圆角浮动；

(4)多边形：plygon()函数

.polygon {

 width: 200px;

 height: 200px; 

clip-path: polygon(0 0, 0 200px, 200px 100px); 

background-color: #A4F4B0;

 shape-outside: polygon(0 0, 0 200px, 200px 100px); 

float:left; 

}

2.Shape的参考盒模型

CSS shapes 通过参考盒来定义并且创建,这个盒子用来绘制元素上的形状。除了元素的高度和宽度,元素的盒模型——margin box,content box,padding box,和border-box也作为指定元素形状的参考。

默认情况下,使用margin box盒模型作为参考,因此如果你想应用形状的那个元素底部有一个边距,你在元素上定义的那个形状将扩展到外边距的边缘,而不是元素的边缘。如果您想要使用另一种盒模型,您可以同时指定盒模型与形状函数,之后传递给形状属性:

shape-outside: circle(250px at 50% 50%) padding-box;

上面的规则中padding-box关键字表明，形状会适用于元素的padding box(padding 盒模型)。circle()函数定义了元素上形状为圆形，以及圆形的大小和位置。

三、CSS Shapes拓展

1.利用图片来定义一个形状

我们可以给shape-outside属性传一个url()函数。使用这个功能可以给其添加一个背景图像。在这个示例中，允许通过url()给shape-outside属性定义一个元素形状是基于图像的。

当你有一个特别复杂的形状，或者有很多曲线和点，你想让你的内容可以更好的围绕这个图形，这个时候，可以使用url()来替代polygon()。或者说，你定认形状非常棘手时，也可以考虑这样的方式。

首先，你需要创建一个带有透明度的图像：

把最初的鹦鹉图像当作的容器的背景图，添加到容器上：

.container { 

background-repeat: no-repeat;

 background-image: url('../img/parrot.png'); 

}

透明度的阈值

形状本身将添加到容器内的另一个元素上，这一次我们使用了另一个CSS属性shape-image-threshold。

.shape {

 shape-margin: 15px;

 shape-outside: url('../img/parrot-shape.png');

 shape-image-threshold: 0;

 }

这处属性定义了图像形状最低透明度的阈值，它可以是一个0到1之间的数字。所以，如果你想让你的图像具有一定的透明度，可以将其设置为0.8或0.5。如果设置其值为0，那么鹦鹉图像周边区域完全是透明的。

最后的效果看起来像这样：

完整代码：（建议使用Chrome浏览器）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鹦鹉</title>

<style type="text/css">

clearfix:before,

.clearfix:after {

  content: " ";

  /* 1 */

  display: table;

  /* 2 */

}



.clearfix:after {

  clear: both;

}





/**

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

  *zoom: 1;

}



body {

  font-family: "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;

  color: #66595c;

  background-color: #faf6ec;

}





/* Start the styles  */



blockquote {

  font-family: "Lucida Bright", Georgia, serif;

  font-style: italic;

}

blockquote {

  padding-top: 40px;

}

blockquote p {

  line-height: 1.6;

  color: #000;

  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.32);

}



.container {

  width: 600px;

  height: 900px;

  margin: 30px auto;

  background-image: url('https://lourfield.github.io/advanced-css-shapes/img/parrot.jpg');

  background-repeat: no-repeat;

}



.shape {

  width: 600px;

  height: 900px;

  float: left;

  shape-image-threshold: 0.5;

  shape-outside: url('https://lourfield.github.io/advanced-css-shapes/img/parrot-shape.png');

  shape-margin: 15px;

}

</style>

</head>



<body>

<div class="support-css-shapes"></div>



<div class="container clearfix">

  <div class="shape"></div>

  <blockquote>

    <p><strong>Parrots</strong>, also known as psittacines are birds of the roughly 393 species in 92 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea

      ("true" parrots), the Cacatuoidea (cockatoos), and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere, as well. The greatest diversity

      of parrots is in South America and Australasia.</p>

  </blockquote>

</div>

</body>

</html>

四、Shape工具

使用形状函数创建复杂的形状有可能非常艰难,特别是如果你通过许多的点和坐标，通过polygon()函数创建一个多边形时。

值得庆幸的是,Adobe的web平台团队一直致力于开发交互式工具使这更容易。贝尔特拉维斯已经创建了一个形状工具,使我们能够可视化的创建多边形形状。这个工具可以根据形状生成形状函数。这是非常有用的,但如果你想创建一个基于特定图像的形状就不可以了,因为这个工具不支持插入图像然后创建形状。

更先进，更富有交互力图形工具是由Adobe网络平台团队开发的。近日发布的工具作为Adobe免费的Brackets编辑器的扩展。它允许您可视化的在浏览器中直接编辑形状,并提供实时预览功能,当改变它们的形状时更新样式表的值。你的更改会有即时的视觉反馈,让你能够了解到你的形状是如何与页面上的其他元素进行交互的。

在浏览器中编辑多边形形状，并在右边使用bracket的实时预览模式来预览。

---部分论述及案例转载自W3cplus

本文链接：https://blog.csdn.net/cwyp18809/article/details/105097750

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp