1、你应当了解的几个CSS3新技术.docVIP

作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。这里是一些CSS3相关的文章和资源，不管你是第一次准备去认识CSS3，还是已经略知皮毛，下面这些资源都将有助你更好的学习和理解CSS3。 ? 英文CSS3资源 CSS3.info 看域名就知道，这是一个专门介绍CSS3的网站。所有你想了解的有关CSS3的信息，都能在这里找到。CSS3.com 又一个专门介绍CSS3的网站，包含各种CSS3参考文章和教程。Introduction to CSS3 W3C官方对CSS3的各种详细介绍。 ? CSS3中的几个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小 ? CSS3 ? 边框效果 ? 圆角 CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆角。 ? ? Html代码 -moz-border-radius:?20px;? ?? -webkit-border-radius:?20px;??? -moz-border-radius: 20px; -webkit-border-radius: 20px; ? 甚至单个角也可以实现圆角，不过 Mozilla 和 Webkit 的语法稍有不同。 Html代码 -moz-border-radius-topleft:?20px;?? ?? -moz-border-radius-topright:?20px;?? ?? -moz-border-radius-bottomleft:?10px;?? ?? -moz-border-radius-bottomright:?10px;?? ?? -webkit-border-top-rightright-radius:?20px;?? ?? -webkit-border-top-left-radius:?20px;?? ?? -webkit-border-bottom-left-radius:?10px;?? ?? -webkit-border-bottom-rightright-radius:?10px;???? -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-rightright-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-rightright-radius: 10px; ? 多层边框 border的另一个非常帮的特性是使用gradientcolors，而不是用图片： Html代码 bordercolor{ ?? ????border:?8px?solid?#000; ?? ????-moz-border-bottom-colors:?#0fff09?#00fff2?#00ff00?#ffd?#ff0?#aaa?#bbb?#ccc; ?? ????-moz-border-top-colors:????#0fff09?#00fff2?#00ff00?#ffd?#ff0?#aaa?#bbb?#ccc; ?? ????-moz-border-left-colors:???#0fff09?#00fff2?#00ff00?#ffd?#ff0?#aaa?#bbb?#ccc; ?? ????-moz-border-right-colors:??#0fff09?#00fff2?#00ff00?#ffd?#ff0?#aaa?#bbb?#ccc; ?? ????width:200px; ?? }?? bordercolor{ border: 8px solid #000; -moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-top-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-left-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc; -moz-border-right-