CSS3資料之邊框

2021-09-12 13:13:31 字數 1866 閱讀 9313

◆ 邊框圓角:

屬性:border-radius

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

如圖所示,我們將四個角標記成1、2、3、4,,css裡提供了border-radius來

分別設定這些角橫縱軸半徑,以「/」進行分隔,遵循「1,2,3,4」規則。「/」前面的

1-4個用來設定橫軸半徑(分別對應橫軸1、2、3、4位置 ),「/」後面1-4個引數用來設定縱軸半徑(分別對應縱軸1、2、3、4位置 )。

border-radius: 60px 60px 60px 60px/ 120px 120px 120px 120px ;

/*簡化*/

border-radius: 60px/120px;

半徑設定可以使用百分比:

border-radius: 50%;
復合寫法,遵循遵循「1,2,3,4」規則,如果某個角沒有設定,那麼預設和對角的設定一樣:

1、border-radius: 10px; 表示四個角的橫縱軸半徑都為10px;

2、border-radius: 10px 5px; 表示1和3角橫縱軸半徑都為10px,2和4角橫縱軸半徑為5px;

3、border-radius: 10px 5px 8px; 表示1角模縱軸半徑都為10px,2和4角橫縱軸半徑都為5px,3角的橫縱軸半徑都為8px;

4、border-radius: 10px 8px 6px 4px; 表示1角橫縱軸半徑都為10px,表示2角橫縱軸半徑都為8px,表示3角橫縱軸半徑都為6px,表示4角橫縱軸半徑都為6px;

指定某個角的邊框圓角:

/*單個屬性 : 水平半徑 垂直半徑*/

border-top-left-radius: 60px 120px;

border-top-right-radius: 60px 120px;

border-bottom-left-radius: 60px 120px;

border-bottom-right-radius: 60px 120px;

◆ 邊框陰影:

屬性:box-shadow

與文字陰影類似,可分別設定盒子陰影偏移量、模糊度、顏色(可設透明度)。

/*box-shadow: 水平位移 垂直位移  模糊程度  陰影大小 陰影顏色 外/內陰影(inset)  **影不用寫 */

box-shadow: 15px 21px 48px -2px #666;

注:設定邊框陰影不會改變盒子的大小,即不會影響其兄弟元素的布局。可以設定多重邊框陰影,實現更好的效果,增強立體感,符合漸進增強。

◆ 邊框:

注:谷歌顯示異常

如圖所示,設定的將會被「切割」成九宮格形式,其中四個角位置、形狀保持不變,中心位置水平垂直兩個方向平鋪或拉伸。

屬性詳情:

border-image-source: url("images/border.png");
border-image-slice: 27;
border-image-width: 27px;
border-image-repeat: stretch;

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...

css3 下邊框緩緩劃過 CSS3 邊框

css3 邊框 用 css3,你可以建立圓角邊框,新增陰影框,並作為邊界的形象而不使用設計程式,如 photoshop。在本章中,您將了解以下的邊框屬性 border radius box shadow border image css3 圓角 在 css2 中新增圓角棘手。我們不得不在每個角落使用...