CSS3邊框背景

2021-07-24 16:33:02 字數 983 閱讀 6125

邊框背景——border-image

邊框背景主要是用來給元素邊框新增背景影象,本質是用一張來修飾邊框背景,看下圖效果:

用左邊來完成右邊的效果;

先看一下邊框背景的引數:border-image:image

boeder-width(引數可寫1-4個)填充方式(

stretch/repeat/round);

border-image有這樣乙個功能,它是用來把一張背景切割成九個部分的,分四刀切,就是border-width對應的四個引數;

第一刀是從上往下切

第二刀是從右往左切

第三刀是從下往上切

第四刀是從左往右切

最終將這個切為九個圖,其中四個角落的會放到你要修飾的邊框的四個角落,其餘四條邊的背景將會用中間淺色的來填充,填充方式有stretch/repeat/round三種;

當border-width只給乙個引數的時候表示四個切割寬度均為所給值

;當給兩個引數時,第乙個表示上下,第二個表示左右;

當給3個引數時,第乙個表示上,第二個表示左右,第三個表示下。

CSS3 邊框和背景

下述內容主要講述了 html5權威指南 第19章關於 使用邊框和背景 css3中邊框和樣式得到了增強。例如 可以建立圓角邊框,使用影象邊框,為元素建立陰影。表 基本邊框屬性屬性 說明值border width 設定邊框的寬度 長度值 百分數 thin medium thick border styl...

css3 背景和邊框

設定背景和邊框 設定背景顏色 background color blanchedalmond background color rgb 100,200 255 background color f4f4f4 邊框設定 具體到屬性 border width 1px 設定邊框寬度 border colo...

CSS3美化背景與邊框

background color屬性用於設定網頁背景顏色,background color屬性接受任何任何有效的顏色值,預設背景顏色為透明 transparent 語法格式如下 background image none url url 屬性值 描述repeat 背景水平和垂直方向都重複平鋪 rep...