澳门正规赌博十大网站-澳门游戏网站
做最好的网站

关于css3的边框的border

 

关于css3的边框的border。boder属性新特性:

CSS3关于css3的边框的border。中有关于border的属性我们一起学习完了圆角border-radius边框颜色border-color,只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后,大家一定会很兴奋,因为他改变我了们以往设置border的效果,以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,dotted,double,dashed等)那么我们以后就可以通过border-image这个属性改变以前的一切,可以给边框设置不同的图片效果。至于如何实现,就跟我一起往下看吧。

一、圆角边框:IE9.0以前版本不支持

border-radius

为了能更好的学习和理解border-image这个属性,我们还是从其最基本的语法地方开始,然后一步一步往深层次学习,那看看border-image关于css3的边框的border。的语法吧。

 

 

语法:

border-radius: 接受8个属性,前四个为x轴,后四个为y轴,以斜杠划分x轴、y轴,即border-radius:左上较 右上角 右下角 左下角 / 左上角  右上角  右下 角  左下角  ;(x轴/y轴 ),如:border-radius: 100px 0 100px 0/100px 0 100px 0。

设置或检索对象使用圆角边框

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

 

border-top-left-radius

 

顺序图:

设置或检索对象左上角圆角边框

关于css3的边框的border。简单的来介绍一下border-image的参数,让大家在脑海中有下初步的概念

 图片 1图片 2图片 3图片 4

border-top-right-radius

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

图片 5

设置或检索对象右上角圆角边框

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

 

border-bottom-right-radius

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

原理图:

设置或检索对象右下角圆角边框

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

图片 6

border-bottom-left-radius

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

 图片 7

设置或检索对象左下角圆角边框

大家看到上面的参数介绍后一定会想起background-image这个属性。是的,这两者之间确实有一些类似之处,其中包括对图片的引用和排列方式都是一样的原理。为了更好的理解,先暂时把border-image在语法的表达形式进行属性的分解来阐述(实际应用中是不能分解的),这样就可以把border-image分解为:

图片 8

box-shadow

1、引入图片:border-image-source;

 

设置或检索对象阴影

2、切割引入的图片:border-image-slice;:

图片 9

border-image

3、边框的宽度:border-image-width;

 

设置或检索对象的边框样式使用图像来填充

4、图片的排列方式:border-image-repeat。

原理:

border-image-source

下面就详细的来介绍上面的四个属性的使用方法和其各自的特性,从而更好的深化border-image的相关知识点。

     以四个角a,b,c,d 为起点,横向为x轴,纵向为y轴,以左上角x轴100px,y轴100px两点之间为弧,四个角交点为圆心的的四分之一圆,同样右下角也是,即border-radius: 100px 0 100px 0/100px 0 100px 0。

设置或检索对象的边框是否用图像定义样式或图像来源路径

一:border-image-source

 

border-image-slice

语法:

效果一:

 

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

图片 10

设置或检索对象的边框背景图的分割方式

 

图片 11

border-image-width

border-image-source跟CSS2中background-image属性相似,也是通过url()调用背景图片,图片的路径可以是相对地址也可以是绝对地址,当然你不想使用背景图片你也可以把值设置为none,即:border-image:none;其默认值就是none。

代码:

设置或检索对象的边框厚度

二、border-image-slice

图片 12图片 13

border-image-outset

语法:

 1 <!doctype html>   2 <html lang="en">   3 <head>   4 <meta charset="UTF-8">   5 <title>Document</title>   6 <style type="text/css">   7 .div1{   8 width: 200px;   9 height: 200px;  10 background-color: red;  11 border-radius: 100px 0 100px 0/100px 0 100px 0;  12 }  13 </style>  14 </head>  15 <body>  16 <div class="div1"></div>  17 </body>  18 </html>

设置或检索对象的边框背景图的扩展

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

View Code

border-image-repeat

 

 

设置或检索对象的边框图像的平铺方式

border-image-slice是用来分解引入进来的背景图片,这个参数相对来说比较复杂和特别,主要表现在以下几点:

 

 

1、其取值支持:<number> | <percentage>其中number是没有单位的,专指像素px,因为其默认的单位就是像素px,所以在使用number时不需要加上单位,如果加上了单位反而是错误的写法。另外我们除了直接用nuember来设置外,我们还可以使用百分比值来表示,百分比的值是相对于边框背景图片而言的,例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%,那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小,如图所示:

效果二:

 

图片 14

图片 15

 

正如上图所示:border-image-slice中的number或者percentage我们都可取1~4个值,这个类似于我们border-width的取值方式,也是遵从top,right,bottom,left的规则,具体的使用规则我想大家都非常清楚,如果不清楚的朋友可以参考CSS2中的border-width或者padding,margin等属性的使用方法。

图片 16

 

fill:从字面上说是就是填充,如果使用这个关键字时,图片边界的中间部分将保留下来。默认情况下是为空的。

原理:

 

2、剪切的特性(slice),在border-image中slice是一个关键部分,也是让人难以理解的部分。如果你用过CSS3中的clip属性,那么在理解border-image-slice来说相对会轻松一些。border-image-slice虽然表意上说不是剪切,但在我们实际应用中他就是一种纯粹的剪切,他把我们通过border-image-source取到的图片切成了九份,在像background-image一样重新布置。前面我们说了他有1~4个参数,类似于border-width的方位规则,在把剪切到的图片重新分布给他们。我们来看一个W3C官网的一个实例,首先来看其剪切示意图

    左下角x轴50px,y轴50px;border-radius: 0 0 0 50px/0 0 0 50px;

 

图片 17

 

 

CSS Code:

代码:

 

  div {
    border: double green 12px;
    -moz-border-image: url("../image/border.png") 124;
    -webkit-border-image: url("../image/border.png") 124;
    -o-border-image: url("../image/border.png") 124;
    border-image: url("../image/border.png") 124;
  }

图片 18图片 19

 

 

 1 <!doctype html>   2 <html lang="en">   3 <head>   4 <meta charset="UTF-8">   5 <title>Document</title>   6 <style type="text/css">   7 .div1{   8 width: 200px;   9 height: 200px;  10 background-color: red;  11 border-radius: 0 0 0 50px/0 0 0 50px;  12 }  13 </style>  14 </head>  15 <body>  16 <div class="div1"></div>  17 </body>  18 </html>

 

从上面的示意中,他在距边框背景图的top,right,bottom,left四边的124px分别切了一刀(蓝色细线为剪切线),这样一来我们就把背景图切成了九个部分,很多地方把他称为“九宫格”。“九宫格”在本文专指由九个方格形成的距形布局图,正如上面的示意图,我们对其进行四刀切后,刚好把图切成九个部分,无意间稳合“九宫格”的模型,这样一来我们就应用这个“九宫格”来帮助我们了解border-image的绘制原理。下面这张图是来自W3C官网的一张border背景图,也是一张重要的示意图,因为这张图刚好具有我们所说的“九宫格”(27×3)×(27×3)。

View Code

 

图片 20

 

 

上图更能帮助我们理解border-image的剪切和绘制原理,1、2、3、4四条蓝色切割线分别在距边框背景图四边的27px地方切了四刀,刚好将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八个边块和最中间的内容区域,如果我们border-width刚好是27px,则上面所说的九部分正好如下图所示的对应位置:

 

 

图片 21

效果三:

 

上图右边所示的图片中,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区域受到水平方向效果影响:如果是repeat则此区域图片会水平重复,如果是round则水平平铺;如果是stretch则被水平拉伸,针对这个我们分别来看三个示例

图片 22

 

水平round效果:

图片 23

 

  .border-image {
    width: 150px;
    height: 100px;
    border: 27px solid orange;
  }
  .border-image-round {
     -webkit-border-image: url("..order.png") 27 round stretch;
     -moz-border-image: url("..order.png") 27 round stretch;
     -o-border-image: url("..order.png") 27 round stretch;
     border-image: url("..order.png") 27 round stretch;
   }

原理:

 

 

     div宽度200px,高度100px,四个角x轴100px,y轴50px,即border-radius: 100px/50px;

 

效果:

 

 

图片 24

代码:

border-image:设置或检索对象的边框样式使用图像来填充

水平repeat效果

图片 25图片 26

<' border-image-source '>:设置或检索对象的边框是否用图像定义样式或图像来源路径。

  .border-image-repeat {
    -webkit-border-image: url("..order.png") 27 repeat stretch;
    -moz-border-image: url("..order.png") 27 repeat stretch;
    -o-border-image: url("..order.png") 27 repeat stretch;
    border-image: url("..order.png") 27 repeat stretch;
  }
 1 <!doctype html>   2 <html lang="en">   3 <head>   4 <meta charset="UTF-8">   5 <title>Document</title>   6 <style type="text/css">   7 .div1{   8 width: 200px;   9 height: 100px;  10 background-color: red;  11 border-radius: 100px/50px;  12 }  13 </style>  14 </head>  15 <body>  16 <div class="div1"></div>  17 </body>  18 </html>  19  

<' border-image-slice '>:设置或检索对象的边框背景图的分割方式。

 

View Code

<' border-image-width '>:设置或检索对象的边框厚度。

效果:

 

<' border-image-outset '>:设置或检索对象的边框背景图的扩展。

图片 27

效果四:

<' border-image-repeat '>:设置或检索对象的边框图像的平铺方式。 

水平拉伸效果

图片 28

[border-radius 圆角]

   .border-image-stretch {
     -webkit-border-image: url("..order.png") 27 stretch round;
     -moz-border-image: url("..order.png") 27 stretch round;
     -o-border-image: url("..order.png") 27 stretch round;
     border-image: url("..order.png") 27 stretch round;
  }

图片 29

         1、border-radius可以接收8个属性值,分别表示:

 

原理:

         X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)

效果:

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:关于css3的边框的border