CSS3邊框溫故

2021-09-29 03:50:10 字數 2580 閱讀 1970

1.簡介:border屬性在css1中就已經定義了,用來設定元素邊框風格,設定不同的邊框、顏色、粗細

2.基本屬性,包括三個型別值:

(1)border-width:設定元素邊框的粗細,預設3~4px

(2)border-color:設定元素邊框的顏色,預設色就是字型顏色

(3)border-style:設定元素邊框的型別,預設【none】

縮寫語法:border:border-width border-style border-color;

注:縮寫後每個屬性之間使用空格隔開,它們之間沒有先後順序

3.在web實際製作之中,css中border可以給不同的邊設定不同的風格,其遵守【trbl】原則(top/right/bottom/left),單獨寫法:

border-top-style(設定元素頂部邊框型別)

border-right-style(設定元素右邊邊框型別)

border-bottom-style(設定元素下邊邊框型別)

border-left-style(設定元素左邊邊框型別)

同理:border-color和border-width都可以單獨設定

注:這種單獨設定方式,分為四種情況:(1)乙個值的時候,表示四條邊設定相同(2)兩個值的時候,第乙個值表示上下邊,第二個值表示左右邊(3)三個值的時候,第乙個值表示上邊,第二個值表示左右,第三個值表示下邊(4)四個值得時候,遵循上、右、下、左,順時針方向設定

超級組合**:li,僅兩行**就表達出元素li頂部和底部都以一條1px的紅色實線。這樣方便維護**,並且提公升css效能

超級組合**引起的思考:突然覺得靈光一閃,自己天天使用border可以說達到了游刃有餘的地步,但是自己卻從來沒有分類的去思考過它,真是萬分慚愧,寫下來與大家共勉

(1)元素設定一條描邊:這種情況使用border-t/r/b/l方法設定為優

(2)元素設定兩條描邊(位置為對立或相連):這種情況使用組合**為優

(3)元素設定三條描邊:這種情況使用組合**為優

(4)元素設定四條描邊:這種情況使用組合**為優

當然還有這些是在描邊都一樣的前提下,不一樣的時候就分別給不同的屬性使用t/r/b/l就可以了

總結:以後對於問題的思考應該分層次,分類,從不同的角度審視

4.邊框的型別:border-style值列表

上面11個值在各瀏覽器下呈現的效果均有差異,其中最不可**的邊框樣式是double,兩條線的寬度和線之間的寬度無法確定。而dotted、dashed、outset和inset在不同的瀏覽器下也無法保證一致

css3邊框還有哪些:border-image、border-radius、box-shadow

5.border-radius設定

遵循trbl規則(top/right/bottom/left),可以設定1、2、3、4種值,是圓的四分之一

eg:border-radius:60px 40px 30px 20px;

單獨設定水平和垂直半徑值:(是橢圓的四分之一)

border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;

6.特殊應用

(1)border-radius還有乙個內半徑和外半徑的區別,元素邊框值較大時,效果就很明顯。當border-radius半徑值小於或等於border的厚度時,元素邊框內部就不具有圓角效果

元素的內半徑 = 外半徑 -邊框寬度

(2)第二種是,元素相鄰邊有不同的寬度,這個角將會從寬的邊平滑過渡到窄的一邊,其中一條邊甚至可以是0,元素相鄰轉角是由大向小轉

還有,應用圓角,**應用圓角,其實可以不用border-width,直接多增加一層就可以避免border-width和border-radius兩者之間的矛盾

(3)相容性

製作圓(設定4個屬性)、半圓(設定兩個屬性)、扇形(設定乙個屬性)、橢圓(x/y)

7.box-shadow

可以當border使用,沒有內外半徑之分,並且不計算在結構中;

多層陰影用逗號【,】分開

相容ie8以下版本,可以使用ie的濾鏡進行模擬:

filter:progid:dximagetransform.microsoft.shadow(color="顏色值",direction=陰影半徑(數值),strength=陰影半徑(數值))

更多專業前端知識,請上

【猿2048】www.mk2048.com

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 中新增圓角棘手。我們不得不在每個角落使用...