加入特殊效果

网页样式设计--CSS

7，加入特殊效果 (效果演示)

CSS定位的剪切(clip)、溢出(voerflow)和可见性(visibility)的属性使WEB设计者很容易地为页面加入特殊效果。

在下面的例子中，建立了一个<span>元素调用隐藏类。在浏览器里是看不到这个文本的，但是可以注意到下面的一行字为它在屏幕上留了一个空间。下一个元素调用了溢出类。"容器"比文本要小，所以这里多余文本被切除了。最后的两个元素演示了裁剪属性。最后的对象直接被褥放置在它前一个之上，但是被裁剪成一个小一点的尺寸；因此，前一个元素显示出来了

<!--

.hidden {position:relative;visibility:hidden}

.overflow {position:absolute;top:210px;left:60px;width:40px;height:40px;background-color:yellow;overflow:hidden}

.plain {position:absolute;top:200px;left:200px;width:150px;height:150px;background-color:#eeeeee;}

.clip {position:absolute;top:200px;left:200px;width:150px;height:150px;background-color:blue;clip:rect(25px 125px 125px 25px);}

-->

</style>

</head>

<body>

This text is invisible on the page</span>but this text is affected by the invisible item's flow

<div class="overflow">This is way too much text for the little box that we have designated.The overflow property will hide it.</div>

<div class="plain">This text is covered by the blue square that follows.But since the square is clipped,some of this text shows through.</div>

<div class="clip">This text is yellow on a blue square,but it is getting cut off by clipping</div>

</body></html>