第93天 CSS3 中邊框詳解

2021-09-20 09:02:03 字數 2400 閱讀 5903

其中邊框圓角、邊框陰影屬性,應用十分廣泛,相容性也相對較好,具有符合漸進增強原則的特徵,我們需要重點掌握。

border-radius每個角可以設定兩個值,x

值,y值

圓角處理時,腦中要形成圓、圓心、橫軸、縱軸的概念,正圓是橢圓的一種特殊情況。

橢圓可分別設定長、短半徑,以「/

」進行分隔,遵循「1,

2,3,

4」規則,「

/」前面的1~4個用來設定橫軸半徑(分別對應橫軸1、

2、3、

4位置 ),「

/」後面

1~4個引數用來設定縱軸半徑(分別對應縱軸1、

2、3、

4位置 )

box-shadow

text/shadow用法差不多

1、水平偏移量正值向右 負值向左

2、垂直偏移量正值向下 負值向上

box-shadow: 5px 5px 27px red, -5px -5px 27px green;

3、模糊度是不能為負值;

4、inset

可以設定內陰影;

設定邊框陰影不會改變盒子的大小,即不會影響其兄弟元素的布局。

可以設定多重邊框陰影,實現更好的效果,增強立體感。

border-image:url("images/border.png") 27/20px round

border-image設定邊框的背景.

border-image-source:url(「」).

border-image-slice:27,27,27,27//裁剪,如何去裁切,瀏覽器會自動去裁剪.

border-image-width:20px;//指定邊框的寬度.

round會自動調整縮放比例

repeat(重複)

border-image-repeat: stretch;//邊框平鋪的樣式stretch拉伸 

設定的將會被「切割」成九宮格形式,然後進行設定。如下圖

「切割」完成後生成虛擬的9塊圖形,然後按對應位置設定背景,

其中四個角位置、形狀保持不變,中心位置水平垂直兩個方向平鋪。如下圖

和repeat

之間的區別

round會自動調整尺寸,完整顯示邊框,如下圖。

repeat單純平鋪多餘部分,會被「裁切」而不能完整顯示,如下圖。

2、更改裁切尺寸

background-slice: 34 36 27 27分別設定裁切如下圖

關於邊框重點理解9宮格的裁切及平鋪方式,實際開發中應用不廣泛,但是如能靈活動用會給我們帶來不少便利。

css3的邊框詳解

css邊框的三個屬性 border 用法 box 第三個顏色使可選的 css3中可以建立圓角邊框,新增陰影框,並作為邊框的形象而不使用設計程式 border radius 用法 box border shadow 用法 box 第乙個引數是x軸偏移量,第二個引數是y軸偏移量,第三個是陰影的尺寸,第四...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...