详解CSS的border边框特性及其在CSS3中的新特点

2021-03-18 07:22 jianzhan

基本
你将会很熟习边的最基础用法。

CSS Code拷贝內容到剪贴板
  1. border1px solid black;  

上面的编码将给元素运用1px的边。即简约又简易;但大家还可以稍作改动。

CSS Code拷贝內容到剪贴板
  1. border-widththick;   
  2. border-stylesolid;   
  3. border-colorblack;  

除特定实际的边框宽度值,还可以应用这3个重要词:thin,medium 和 thick。

尽管乍看起来单独特性的方法没必要,但有非常少数的状况下,当它是有益的,比如当你必须在特殊的恶性事件产生时升级边的一部分特性。
或许你必须在客户将电脑鼠标悬停在1个特殊的元素上时更改这个元素的边框色调。应用复合型特性必须反复像素值和边的款式。

CSS Code拷贝內容到剪贴板
  1. box {   
  2.     border1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border1px solid green;   
  7. }  

1个更雅致的和简约(DRY,don’t repeat yourself)的做法是只升级边的色调特性。

CSS Code拷贝內容到剪贴板
  1. .box {   
  2.     border1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border-colorgreen;   
  7. }  

另外,1会你会发现,这类单独特性的方法有助于根据CSS建立自定的样子。

CSS3新特点
在 CSS3 中,border 提升了两个新的特点,1是边框照片,而是在边框色调中应用渐变色色。
边框照片运用 border-image 特性完成,能够为1个元素特定1个照片做为边框,替代传统式的线条边框,它有5个子特性:

CSS Code拷贝內容到剪贴板
  1. border-image-source  

设定边框照片的照片详细地址,仅有设定了这个特性,才算是应用了边框照片,其值为 url() 的方式。

CSS Code拷贝內容到剪贴板
  1. border-image-width  

该特性特定边框厚度,其值能够为带企业的长度值,还可以是不带企业的浮点值或百分比,还能够是“auto”,这时候其值为 border-image-slice 的值,“auto”值很常见,能够便捷地做出相近相册边框的精美边框。

CSS Code拷贝內容到剪贴板
  1. border-image-slice  

该特性特定从上,右,下,左方向来隔开图象,将图象分为4个角,4条边和正中间地区共9份,正中间地区自始至终是全透明的(即没图象填充),除非再加重要字 fill,其值能够为标值或百分比。比如:设定 border-image-slice: 20 25 30 35; border-image-slice: auto,则图象会造成像下图那样的4个角:
原图区划示用意:

具体实际效果图

CSS Code拷贝內容到剪贴板
  1. border-image-outset  

该值设定边框照片的拓展,非常于在边框內容添加“padding”。

CSS Code拷贝內容到剪贴板
  1. border-image-repeat  

设定用何种方法填充边框,其值能够为 stretch、repeat、round、space,stretch 是拉伸方法,repeat、round 和 space 方法全是平铺方法,但3个之间略有不一样,repeat 是立即平铺照片,照片若超过边框时断开,round 会动态性调剂照片的尺寸,直至照片恰好能够铺满全部边框,space 则会在照片之间提升空白,直至照片恰好能够铺满全部边框。
值得留意的是,直至 Chrome 23, Firefox 17, Safari 5.1.7, Opera 12.5 ,IE 10 ,唯一 Firefox 适用 round ,沒有任何访问器适用 space 。
接下来是边框梯度色调,相对性边框照片,边框梯度色调的访问器适用度就更低了,临时仅有 Firefox 能根据独享特性适用。但做为1个很酷的实际效果,还可以先注意1下:

CSS Code拷贝內容到剪贴板
  1. .gradientcolor{   
  2.     border6px solid #fff;   
  3.     -moz-border-bottom-colors: #ff9900 #99cc33 #ccc;   
  4.     -moz-border-top-colors:    #ff9900 #99cc33 #ccc;   
  5.     -moz-border-left-colors:   #ff9900 #99cc33 #ccc;   
  6.     -moz-border-right-colors:  #ff9900 #99cc33 #ccc;   
  7. }  

实际效果以下: