css3 Border属性

发布时间:2019-08-05 15:35:17编辑:auto阅读(7614)

     css3中关于Border的属性一共有三个:圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。

    一、圆角border-radius

    1、语法

    1. border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 

    <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

    2、变化说明

    border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

     

    1)border-radius: [ <length>{1,4} ];

    这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

    2)border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ;

    这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

    3)border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];

    如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

    4)border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];

    如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

     

    前面,我们主要看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴再X轴,具体看下面:

    1. border-top-left-radius: <length>  <length>   //左上角 
    2. border-top-right-radius: <length>  <length>  //右上角 
    3. border-bottom-right-radius:<length>  <length>  //右下角 
    4. border-bottom-left-radius:<length>  <length>   //左下角 

    border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等。(border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面

    圆角参考传送门

    二、图片边框border-color

     1、css2的border-color属性应用

    1. border-color: <color>/*其中可以上一个值,也可以是多个值,具体我在这里不多说了,大家来时用到的也特别多*/ 
    2. /*我们可以分别给各边上色*/ 
    3. border-top-color: <color>/*给上边框上色*/ 
    4. border-right-color: <color> /*给右边框上色*/ 
    5. border-bottom-color:<color> /*给下边框上色*/ 
    6. border-left-color: <color> /*给左框上色*/ 

    2、css3的border-color属性

    首先css3的border-color属性现在只有Firefox3.0+浏览器支持

    所以css3的border-color属性只有一种写法:

    1. -moz-border-top-colors: red blue white white black
    2. -moz-border-right-colors: red blue white white black
    3. -moz-border-bottom-colors: red blue white white black
    4. -moz-border-left-colors: red blue white white black;    

    这样同一属性下可以写多个颜色值,由外而内地产生渐变的效果。

    border-color参考传送门

    三、边框多颜色border-p_w_picpath

    1、语法

    1. border-p_w_picpath : none | <p_w_picpath> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2

    简单的来介绍一下border-p_w_picpath的参数,让大家在脑海中有下初步的概念:

    1)none:是border-p_w_picpath的默认值,如果取值为none时,表示边框无背景图片;

    2)<p_w_picpath>:设置border-p_w_picpath的背景图片,这个跟background-p_w_picpath一样,使用绝对或相对的url地址,来指定背景图片;

    3)<number>:number是一个数值,用来设置边框的宽度,其单位是px,其实就像border-width一样取值,可以使用1~4个值,其具体表示四个方位的值,大家可以参考border-width的设置方式;

    4)<percntage>:percntage也是用来设置边框的宽度,跟number不同之处是,其使用的是百分比值来设置边框宽度;

    5)stretch,repeat,round:他们是用来设置边框背景图片的铺放方式,类似于background-position,其中stretch是拉伸,repeat是重复,round是平铺,stretch为默认值。

    2、示例

    可以把border-p_w_picpath分解为:

    1)引入图片:border-p_w_picpath-source;

    1. border-p_w_picpath-source:url(p_w_picpath url);/*p_w_picpath url可以是相对地址也可以是绝对地址*/ 

    2)切割引入的图片:border-p_w_picpath-slice;

    1. border-p_w_picpath-slice: [ <number> | <percentage>]{1,4}&& fill?  

    3)边框的宽度:border-p_w_picpath-width;

    1. border-p_w_picpath-width: [ <length> | <percentage> | <number> | auto ]{1,4}  

    4)图片的排列方式:border-p_w_picpath-repeat。

    1. border-p_w_picpath-repeat: [ stretch | repeat | round ]{1,2}  

    stretch:拉伸效果  

    repeat:水平重复效果

    round:水平平铺效果

    border-p_w_picpath参考传送门

关键字

上一篇: H3C-限速

下一篇: js恶补3