• 技术文章 >web前端 >css教程

    CSS3教程(3):border-color网页边框色彩_css3_CSS_网页制

    黄舟黄舟2016-12-23 15:56:36原创1035
    网页制作Webjx文章简介:现在我们来看一看如何为边框的border-color添加更多的色彩。 现在我们来看一看如何为边框的border-color添加更多的色彩。 上一篇介绍了:CSS3教程(2):网页边框半径和网页圆角 使用CSS3的border-r


    现在我们来看一看如何为边框的border-color添加更多的色彩。
    现在我们来看一看如何为边框的border-color添加更多的色彩。
    上一篇介绍了:CSS3教程(2):网页边框半径和网页圆角
    使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜色,那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性
    目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。
    所有本系列关于CSS3的文章都会及时更新,以跟踪浏览器的兼容性。 CSS3中的边框颜色

    190.jpg

    这里是一个10px宽的标准边框和边框颜色:
    #borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; }
    浏览器支持:

    FireFox (3.0.5)

    Google Chrome (1.0.154 )

    Google Chrome (2.0.156 )

    Internet Explorer (IE7/IE8 RC1)

    Opera (9.6)

    Safari (3.2.1, Windows) 有圆角的边框颜色

    191.jpg

    #borderColorCorner { border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; }
    浏览器支持:

    FireFox (3.0.5)

    Google Chrome (1.0.154 )

    Google Chrome (2.0.156 )

    Internet Explorer (IE7/IE8 RC1)

    Opera (9.6)

    Safari (3.2.1, Windows)

    以上就是CSS3教程(3):border-color网页边框色彩_css3_CSS_网页制的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3,border-color
    上一篇:CSS3教程(2):网页边框半径和网页圆角_css3_CSS_网页 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 手把手教你使用CSS实现酷炫六边形网格背景图• 聊聊怎么利用CSS实现波浪进度条效果• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景
    1/1

    PHP中文网