摘要:概覽邊框本應該在盒模型一文中一并介紹,只因為避免篇幅較長特獨立此文與輪廓和陰影一并介紹。之所以將邊框,輪廓和陰影一并介紹,看下圖就明白了輪廓是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用。水平陰影的位置。陰影擴散的尺寸。
概覽
邊框本應該在盒模型一文中一并介紹,只因 為避免篇幅較長特獨立此文與輪廓和陰影一并介紹。
之所以將邊框,輪廓和陰影一并介紹,看下圖就明白了:
輪廓(outline)是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用。
邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
陰影 (box-shadow)是CSS 3新增的屬性,用來向元素框添加陰影。
三者可以多帶帶存在,也可以同時存在。下面將分開對其進行簡單介紹。
邊框 borderHTML 元素的邊框有四個,每個邊框有 3 個方面:寬度、樣式、以及顏色。
/* border: 寬度 樣式 顏色; */ border: 1px solid red; /* 等價于 */ border-width: 1px; border-style: solid; border-color: red;
邊框 | 上邊框 | 右邊框 | 下邊框 | 左邊框 |
---|---|---|---|---|
border | border-top | border-right | border-bottom | border-left |
border-width | border-top-width | border-right-width | border-bottom-width | border-left-width |
border-style | border-top-style | border-right-style | border-bottom-style | border-left-style |
border-color | border-top-color | border-right-color | border-bottom-color | border-left-color |
上表對邊框的屬性進行了分組以方便記憶。第一行屬性為簡寫屬性,分別對應其下的三個具體屬性。現僅對其中一組具體屬性(第一列吧)進行介紹。
寬度 width邊框的寬度有兩種值可選,一種是指定長度值,比如 2px 或 0.1em,另一種是使用 3 個關鍵字之一,它們分別是 thin 、medium(默認值) 和 thick。
注釋:CSS 沒有定義 3 個關鍵字的具體寬度,所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等于 5px、3px 和 2px,而另一個用戶代理則分別設置為 3px、2px 和 1px。
p {border-style: solid; border-width: 5px;} p {border-style: solid; border-width: thick;}
由于邊框有四個方位,所以border-width有四個值可填,如若部分省略,同樣遵循 值復制 原則。
p {border-style: solid; border-width: 5px;} /* 等價于 5px 5px 5px 5px */ p {border-style: solid; border-width: 5px 3px;} /* 等價于 5px 3px 5px 3px */ p {border-style: solid; border-width: 5px 3px 2px;} /* 等價于 5px 3px 2px 3px */
其他具體方位邊框寬度(border-top-width,border-left-width等)只能填一個值。
樣式 style樣式是邊框最重要的一個方面,因為如果沒有樣式,就沒有邊框,換句話就是說:寬度和顏色都可以沒有,但不能沒有樣式,樣式默認為 none.
CSS 中定義了十種邊框樣式。
值 | 描述 |
---|---|
none | 定義無邊框。 |
hidden | 與 none 相同。 |
dotted | 定義點狀邊框。 |
dashed | 定義虛線。 |
solid | 定義實線。 |
double | 定義雙線。雙線的寬度等于 border-width 的值。 |
groove | 定義 3D 凹槽邊框。 |
ridge | 定義 3D 壟狀邊框。 |
inset | 定義 3D inset 邊框。 |
outset | 定義 3D outset 邊框。 |
inherit | 規定應該從父元素繼承邊框樣式。 |
還是看一下效果圖吧
和寬度一樣,樣式也可以分別作用在四個方位,并且遵循著相同的值復制規則。
border-style: dotted solid double dashed; border-style: dotted solid double; border-style: dotted solid; border-style: dotted;顏色 color
設置邊框顏色非常簡單。
可以使用任何類型的顏色值,例如可以是命名顏色(red,blue等),也可以是十六進制(#ff0000)和 RGB 值:
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
除了上面的三種值可選外,還有一個 transparent 透明邊框可選,不是太常用。
另外,當我們不指定邊框顏色的時候,只指定邊框樣式,邊框也是有顏色和寬度的。它將與元素的文本顏色相同。另一方面,如果元素沒有任何文本,假設它是一個表格,其中只包含圖像,那么該表的邊框顏色就是其父元素的文本顏色(因為 color 可以繼承)。
注意:在 IE7 之前,沒有提供對 transparent 的支持。在以前的版本,IE 會根據元素的 color 值來設置邊框顏色。
圖像 imageCSS 3 中對邊框進行了豐富,增加了 image 和 radius 兩個屬性。
邊框圖像稍微有點復雜,先看一個例子來體會其簡單用法:
使用的圖像尺寸為: 81 x 81px
對一個 div 元素進行測試
相應樣式
div.demo { width:150px; height:80px; margin:50px auto; border-style:solid; border-width:20px; border-image:url("border.png") 27 fill/27px/30px repeat; }
得到下面的樣式
上例我們使用了border-image簡寫屬性,其等價于下面的拆寫屬性:
border-image-source: url("border.png"); border-image-slice: 27 fill; border-image-width: 27px; border-image-outset: 30px; border-image-repeat: repeat;
下面將對拆分屬性及其值進行概要介紹。
border-image-source這個很好理解,用來指定使用的圖像。
border-image-slice這個屬性用來控制圖像的切分。給定一個邊框圖像都會經過四次切分,你可以形象的按下圖理解其切分流程。
經過四次切分后,得到9個區域(俗稱“九宮格”)
border-image-slice 屬性及值就是控制切分的偏移量的,類似border-width,它也有四個方位,并且遵循 值復制 規則,不同的是:截取的尺寸不需要單位,尺寸后可以添加fill關鍵字。
border-image-slice: 27; /*等價于 27 27 27 27*/ border-image-slice: 27 20 fill; /*等價于 27 20 27 20 fill*/ border-image-slice: 27 20 22 fill; /*等價于 27 20 22 20 fill*/
關鍵字fill標示中間區域將出現(出現歸出現,至于能否看見,要看你截取的中間區域部分是否有可見圖像),如下圖:
border-image-width邊框圖像寬度屬性用來設置邊框圖像的寬度,邊框圖像寬度和邊框寬度不是一碼事,但有部分關聯。
如果沒有邊框圖像寬度定義,則默認邊框圖像寬度等于邊框寬度,如果有邊框圖像寬度定義,則以邊框圖像寬度為準。
下圖為沒有定義邊框圖像寬度的情形,邊框圖像寬度等于邊框寬度。
下圖為設置了邊框圖像寬度的情形:
邊框圖像寬度大于邊框寬度,圖像向邊框內溢出。
邊框圖像寬度也類似與邊框寬度的定義,也是四個方位值,也遵循值復制規則。
border-image-outset此屬性用來設置邊框圖像向邊框外偏移的量。
在上面的圖中我們看到圖像向邊框內溢出了,如果擔心向內溢出遮擋內容,我們可以通過此屬性讓其向外溢出一定尺寸。
border-image-outset: 30px 10px;
此屬性的值設置也是四個方位,同樣遵循值復制規則。
border-image-repeat此屬性控制著邊框圖像復制延伸的方式。有三個值可選:
stretch
拉伸圖像來填充區域,比較好理解。默認屬性值。
repeat
平鋪(重復)圖像來填充區域,從中間向兩邊復制。
round
類似 repeat 值。如果無法完整平鋪所有圖像,則對圖像進行縮放以適應區域。
使用 round 最明顯的好處是保證截取區域的完整性,而不像 repeat 會出現一半的情況,round 可能會進行少量的縮放。
下圖為 上下 round 左右 repeat 可以對比一下區別。
另外,此屬性雖說也有四個方位,但最多只能設置兩個值:上下一致,左右一致。
border-image-repeat: round repeat;border-image
邊框圖像的簡寫屬性,可以將上述具體屬性集中到此屬性中,知道其語法格式即可,上面已經有過例子了。
border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;圓角 radius
CSS 3 中新增了邊框圓角的樣式。
圓角相對比較簡單,只有一個簡寫屬性(border-radius)和四個具體方位屬性,對于圓角來說,四個方位不再是上下左右了,而是:左上角(border-top-left-radius),右上角(border-top-right-radius),右下角(border-bottom-right-radius),左下角(border-bottom-left-radius)。屬性值同樣遵循 值復制 規則。
border-radius: 15px; /*等價于 15px 15px 15px 15px*/ border-radius: 10% 10px; /*等價于 10% 10px 10% 10px*/
由于每個角都涉及兩個方位(如:左上,關聯 top 和 left),所以每個角可以設置兩個值分別對應角上的兩個方位,兩個值使用 / 分隔,前面的表示上下的值,后面的表示左右的值。如果兩個值相同,只寫一個即可。
border-top-left-radius: 15px/15px; /*等價于 15px*/
通過下圖你會對圓角有更加形象的認識。
輪廓 outlineoutline 輪廓是繪制于元素周圍的線,位于邊框邊緣的外圍,可起到突出元素的作用。
注釋:輪廓線不會占據空間。
輪廓的使用同邊框,但沒有邊框那么復雜。輪廓只有:outline(簡寫屬性,集中樣式,尺寸,顏色的設置),outline-style,outline-width,outline-color,4個屬性可選,沒有像邊框似的對四個方位的具體設置相關的屬性。
由于其使用及相應的屬性值跟邊框相同,故不再贅述。
陰影 box-shadowbox-shadow 陰影屬性用來向框添加一個或多個陰影。
div { box-shadow: 10px 10px 5px #888888; }
語法
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表,每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
值 | 描述 |
---|---|
h-shadow | 必需。水平陰影的位置。允許負值。 |
v-shadow | 必需。垂直陰影的位置。允許負值。 |
blur | 可選。模糊距離。 |
spread | 可選。陰影擴散的尺寸。 |
color | 可選。陰影的顏色。 |
inset | 可選。將外部陰影 (默認為外部陰影) 改為內部陰影。 |
水平和垂直陰影位置是必選項,其值可以為負值。
畫過素描的同學會很容易理解陰影(沒畫過的也很容易理解的)。
陰影跟光源有關,光源的位置不同,陰影也不同,光源的數量多少也決定著陰影的效果,物體的形狀也影響陰影。
想象上圖是一個桶,所成的陰影是我們從桶的上面去看,光線方向大致在桶的左上方所致。
代碼實現為:
div { width:100px; height:100px; margin: 100px auto; background-color:#ff8888; border:1px solid #000; border-radius: 50%; box-shadow: 10px 10px 5px #888888, 10px 10px 5px #888 inset; }小結
邊框和輪廓都是由樣式,寬度和顏色進行定義,還可以給邊框添加圓角,使其更加美觀,陰影的使用可以使元素更加符合生活場景。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111171.html
摘要:多重邊框的兩種實現方案以由逗號分隔的列表來描述一個或多個陰影效果。輪廓與邊框在以下幾個方面存在不同輪廓不占據空間,它們被描繪于內容之上輪廓可以是非矩形的。是元素的輪廓,懸浮在元素邊框之上。也就是說,它們之間的顏色會繼承父元素的背景色。 多重邊框的兩種實現方案: border-shadow outline Mutiple border ...
摘要:在動畫過程中,您能夠多次改變這套樣式。以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。為了獲得最佳的瀏覽器支持,您應該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括: 背景和邊框 文本效果 2D/3D 轉換 動畫 多列布局 用戶界面 CSS3 邊框: 用于創建圓角 border...
摘要:父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為,并設置其背景顏色設置的上外邊距為觀察其結果。 前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS:Cascading Style Sheets層疊樣式表,級聯樣式表(簡稱:樣式表) 2.作用 設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML:負責內容的展示 CSS:負責內容(元素)...
摘要:簡單就意味著更快的開發速度,更小的維護成本,同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為,此時陰影與元素同樣大。如果沒有指定,則由瀏覽器決定通常是的值,不過目前取透明。首先,我們要明白這里的最小寬度值是什么意思。 暑假實習的時候帶我的師傅,告訴我要注重基礎,底層實現原理。才能在日新月異的技術行業站住腳跟,以不變應萬變,萬丈高樓平地起,所以我們應該不斷的去學習,去交流。...
閱讀 2568·2023-04-25 17:33
閱讀 648·2021-11-23 09:51
閱讀 2951·2021-07-30 15:32
閱讀 1394·2019-08-29 18:40
閱讀 1940·2019-08-28 18:19
閱讀 1465·2019-08-26 13:48
閱讀 2237·2019-08-23 16:48
閱讀 2275·2019-08-23 15:56