CSS3让网页更富于表现和支持更复杂布局

我们的基于WebKit原型支持使用一个简单的多边形指定一个形状，但是你可以想象其它的集合体也可以被用于设定形状，或者甚至使用一张图片的alpha值。。。

环绕(Exclusions)

通过使用wrap-shap-mode属性的其它值，你可以创建不同的效果，包括指定的wrap-shape 属性可以理解为要完全避开的区域(看图4)。

图4. 文字环绕在自定义图形周围

CSS

1
2
3
4

.exclusion{
	/* 文字环绕整个元素 */
	wrap-shape-mode: around;
}

HTML

1
2
3

 <div class="exclusion circle">
	<p>Lorem ipsum dolor [...]</p>
</div>

区域样式(Region Styling)

在杂志中，指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction标题的部分)被设定为深蓝色，而余下的文字则为灰色(看图 5)。

图5.文字样式依赖它流入的区域

CSS

1
2
3
4
5
6
7
8

p {
	color: gray:
}
@region-style #region_1 {
	p {
		color: #0C3D5F;
	}
}

HTML

1
2
3
4
5
6
7
8

<div id="article">
	<h1>Introduction</h1>
	<p>This is an example [...]</p>
</div>
<div id="region_1"></div>
<div id="region_2"></div>
<div id="region_3"></div>
<div id="region_4"></div>

区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。

CSS3 区域和媒体查询

那些基本的构建块可以组合起来创建更有趣更复杂的布局，类似你经常看到的印刷出版物。你也可以将它们配合其它web标准适用。比如，结合CSS媒体查询，可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

图 6展示了使用wrap-shape属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局。

图6. 使用属性结合CSS3 媒体查询来

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!