亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬于一種動態樣式,只有元素獲取到焦點或者被激活時呈現。

outline屬性早在CSS2中就出現了,主要是用來在元素周圍繪制一條輪廓線,可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持,在CSS3中對outline作了一定的擴展,在以前的基礎上增加新特性。outline屬性的基本語法如下:

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

從語法中可以看出outline和border邊框屬性的使用方法極其類似。outline-color相當于border-color、outline-style相當于border-style,而outline-width相當于border-width,只不過CSS3給outline屬性增加了一個outline-offset屬性,其取值說明如下。

 

屬性值

屬性值說明

outline-color

定義輪廓線的顏色,屬性值為CSS中定義的顏色值。在實際應用中,可以將此參數省略,省略時此參數的默認值為黑色。

outline-style

定義輪廓線的樣式,屬性為CSS中定義線的樣式。在實際應用中,可以將此參數省略,省略時此參數的默認值為none,省略后不對該輪廓線進行任何繪制。

outline-width

定義輪廓線的寬度,屬性值可以為一個寬度值。在實際應用中,可以將此參數省略,省略時此參數的默認值為medium,表示繪制中等寬度的輪廓線。

outline-offset

定義輪廓邊框的偏移位置的數值,此值可以取負數值。當此參數的值為正數值,表示輪廓邊框向外偏離多少個像素;當此參數的值為負數值,表示輪廓邊框向內偏移多少個像素。

inherit

元素繼承父元素的outline效果。

任務

在CSS編輯器第4行輸入正確代碼,制作雙色邊框效果。

溫馨提示:案例的效果如上圖所示才算順利通關,否則請再學習一遍本節的知識點!

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?