国产BBAAAAA片,韩国爱情电影在线完整版,在线无码中文字幕一区,无码免费人妻A片AAA毛片西瓜,国产亚洲精品久久777777黑寡妇,农村熟妇高潮精品A片,性做爰1一7伦,成人片黄网站色大片免费毛片,少妇搡BBBB搡BBB搡野外,国产偷人妻精品一区

對于CSS屬性border，相信所有的WEB開發人員都非常熟悉。我們可通過設置HTML元素的border的寬度、顏色、樣式，來讓HTML元素表現出不同的邊框，比如雙線、虛線、圓點線。但不管你怎么設置，這些都是一些非常原始的做法。從CSS3起，我們有了一個新的屬性：border-image，它能讓你用漂亮的小圖片來圍繞HTML元素，以圖片邊框的形式出現。通過border-image屬性，我們可以制作出非常漂亮的邊框樣式。

在CSS3里引入的很多新特征中，比如HTML5中新型input類型,中文字體(web font),placeholder等，都很實用，也很流行，而且我們之前也舉了一個非常漂亮的border-image的例子，但網絡上使用圖片邊框border-image的還是很少，我想主要是因為谷歌瀏覽器和火狐瀏覽器很早就支持它們了，而IE11才支持這種語法。

圖片邊框border-image的語法

正式語法： <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

這些語法描述看起來非常的枯燥，每個人都喜歡看實例，這樣容易理解，下面我們就來將幾個實例。

圖片邊框border-image用法一：邊框圖循環平鋪(repeat)

這種情況下，邊框圖圖片將會依次平鋪，填滿邊框區域。

  <div id="repeat">圖片將會循環貼滿邊框區域</div> 

#repeat { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */ border-image:url("/files/4127/border.png") 30 30 repeat; } 

實例演示1：

圖片邊框border-image用法二：邊框圖自適應循環平鋪(round)

大家也許看到了，上面的圖片邊框雖然很漂亮，但有個瑕疵，就是當元素寬度或高度不是邊框圖的整數倍時，后一個/個圖片不能完成顯示，會被遮擋一部分，這樣看起來很不美觀。CSS3的設計者們已經考慮到了這個問題，使用round屬性值，就能避免這種情況。round的作用是邊框圖進行稍微的調整，來保證每個圖片都能完成顯示，增加了觀賞性。

  <div id="round">圖片將會貼滿邊框區域</div> 

#round { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */ border-image:url("/files/4127/border.png") 30 30 round; } 

實例演示2

圖片邊框border-image用法三：邊框圖拉伸平鋪(stretch)

‘stretch’就是拉伸，將小圖片拉長來填滿邊框區域，并不循環，很顯然，這樣邊框圖會變形。

  <div id="stretch">圖片將會拉伸貼滿邊框區域.</div> 

#stretch { border: 15px solid transparent; padding: 10px 20px; -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */ -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */ -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */ border-image:url("/files/4127/border.png") 30 30 stretch; } 

實例演示3

很顯然，border-image種用法應該是不常用的，因為有時候它會導致邊框有殘缺的感覺。而第二種和第三種用法各有千秋，是各自不同的美。這里使用的邊框圖其實很簡單。精巧的美工能做出更漂亮的邊框圖，能呈現出讓人贊嘆的效果，就比如之前的文章里的一個例子，下面再次拿出來給大家看看。