css3 Border属性

2023-01-31 01:01:50 border 属性 css3

 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); 

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参考传送门

相关文章