使用CSS3将你的网站设计推向未来

	border-bottom-right-image
	border-bottom-image
	border-bottom-left-image
	border-left-image
    border-top-left-image
    border-top-image
    border-top-right-image
    border-right-image

Supported in Firefox 3.1, Safari and Chrome.

As used by: Blog.SpoonGraphics.

See also:

• W3C Working Draft
• Border-image on CSS3.info
• Border-image in Firefox

3. Box Shadow and Text Shadow

Drop shadows: don’t you just love them?! They can so easily make or break a design. Now, with CSS3, you don’t even need Photoshop! The usage we’ve seen so far has really added to the design, a good example being this year’s 24 Ways website.

1. -webkit-box-shadow: 10px 10px 25px #ccc;   
2. -moz-box-shadow: 10px 10px 25px #ccc;   
3. box-shadow: 10px 10px 25px #ccc;  

          -webkit-box-shadow: 10px 10px 25px #ccc;
          -moz-box-shadow: 10px 10px 25px #ccc;
          box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:

1. text-shadow: 2px 2px 5px #ccc;  

        text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

As used by: 24 Ways.

See also:

• W3C Working Draft
• Box-shadow on CSS3.info
• W3C Working Draft
• Text-shadow on CSS3.info

4. Easy Transparency with RGBA and Opacity

The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.

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