• 抽丝剥茧解开CSS3中的Border属性的外衣
  • 咸蛋超人 发表于 2016/3/18 19:11:00 | 分类标签: css3 边框属性 Border
  • 这几天使用border-raduis画了各种形状,顺带归纳了一下CSS中的border属性,本篇笔记中主要涉及的知识点有:
    1.border属性
    2.css3新增的3个border属性:border-color、border-radius、border-image

    border属性:

    语法:border:border-width border-style border-color,单独设置边框时使用以下几个属性:
        border-left 设置左边框,一般单独设置左边框样式使用
        border-right 设置右边框,一般单独设置右边框样式使用
        border-top 设置上边框,一般单独设置上边框样式使用
        border-bottom 设置下边框,一般单独设置下边框样式使用。

    通常我们对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数,例:border:1px solid red;。
    border-width:可以用数值或者属性值(thin、medium、thick、inherit(IE都不支持));使用数值必须为正数字,否则无效。

    可以是一个值(4个边框相同)、2个值(前者为上下边框,后者为左右边框)、3个值(中间值代表左右边框)
    .border-width:border-top-width border-right-width border-bottom-width border-left-width;(上右下左)
    border-style边框样式值如下:
    none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  点线。
    dashed :  虚线。
    solid :  实线边框(常用)
    double :  双线边框。两条单线与其间隔的和等于指定的border-width值
    groove :  根据border-color的值画3D凹槽
    ridge :  根据border-color的值画菱形边框
    inset :  根据border-color的值画3D凹边
    outset :  根据border-color的值画3D凸边

    设置0 和none的差异:

    border:0;把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
    border:none;把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。
    border样式不可继承。

    css3新增的属性:border-color、Border-radius、border-image:

    边框颜色border-color:
    Border-color设置边框的颜色,如果想给4个边框分别设置不同的颜色,例如一个边框上多个色彩,可以使用border-color来实现,目前应用该属性的范围相对较小,只有Firefox3.0以上的版本支持,记得加上-moz-前缀。css代码如下:
      border-top-color: <color1><color2>....
      border-right-color: <color1><color2>....
      border-bottom-color:<color1> <color2>....
      border-left-color: <color1><color2>....
    *使用css3的border-color属性时,如果你的boder宽度设置了X px,那么你可以在这个边框上使用X种颜色,此时每一个颜色就是一个px,如果你的border宽度设置了10px,而你只运用了三四个颜色,那么最后一个颜色将会填充到后面的宽度上。

    圆角border-radius:

    语法:border-radius : none | <length>{1,4} [/ <length>{1,4} ]  两个<length>由浮点数字和单位标识符组成,不可为负值。一般会把"/"省略,表示水平和垂直半径都相等。
    目前以下浏览器版本支持这一属性:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+。

    值的设置:
    Mozilla提供的文档很好地介绍了这几个值:
    If one value is set, this radius applies to all 4 corners.
    If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
    Three values: The second value applies to top-right and also bottom-left.
    Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
    >如果只设置了一个值,那么radius讲作用于4个圆形角
    >两个值,那么第一个值作用于左上角与及右下角,第二个值作用于右上角及左下角(X交叉)
    >三个值,那么第一个值作用于左上角,右上角和和左下角公用第二个值,第三个值将是右下角(左下和右上共用)
    >四个值,那么第一个值作用于左上角,右上角,右下角,左下角(顺时针)


    边框图片border-image:

    语法 border-image : none | <image url> | <border-image-slice>{1,4} |<border-width>{1,4} |<repeat>
    border-image有六大属性值,分别是:图片地址border-image-source、图片切片border-image-slice、图片宽度border-image-width、图片外凸border-image-outset、图片重复border-image-repeat
    图片地址:<image url>可以是相对地址也可以是绝对地址
    图片切片: <border-image-slice>[ length | percentage | number | auto ]{1,4}数值百分比等,数值没有单位。指定边框图像顶部、右侧、底部、左侧内的偏移量。把边框图片切成9个部分,俗称“九宫格”,如图所示:
                            
    图片具体详解:
    1.刚好将border-image分成了九部分:border-top-image,border-right-image,border-bottom-image,border-left-image,border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image八个边块和最中间的内容区域。
    2.border-top-right-image,border-bottom-right-image,border-bottom-left-image,border-top-left-image四个边角部分,在border-image中是没有任何展示效果的,称为盲区。
    而对应的border-top-image,border-right-image,border-bottom-image,border-left-image四个黄色区域在border-image中是属于展示效果的区域。上下区域border-top-image和border-bottom-image区域受到水平方向效果影响。
    边框的宽度:<number>使用数值时同样不需要加上px,加上反而是错误的,这里可以设置1-4个值。 或者 百分比<percentage>
    图片的排列方式:[ stretch图片水平拉伸 | repeat水平重复 | round 水平平铺]
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:咸蛋超人
  • 加入时间:2013/6/4 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮