您現在的位置是:電腦技術吧?>? 組裝維修 ??>??outline怎么用,什么是outline??>??正文詳情

outline怎么用,什么是outline

彭野雪2019-11-22 09:51:45 人圍觀
簡介outline格式首先,提綱是一件很好的事情。一。邊疆的近親勾勒和邊疆的近親。你為什么這么說?首先,它們都是外部框架元素。其次,支持的屬性值幾乎相同,例如大綱樣式和邊框樣式

一、首先,outline是個很牛的東西  1. border近親  outline和border是近親,為什么這么講呢?首先,都是給元素外面套框框的;其次,支持的屬性值幾乎都是一樣的,例如,outline-style和border-style值dotted, dashed, solid, ...之類的,一些語法也幾乎一樣。

如果這都不算近親,你讓絕對定位和浮動何言以對。

  2. IE8 支持  outline嚴格來講屬于CSS3屬性,但是IE8 瀏覽器就支持了。

外掛一句,IE9 瀏覽器的outline還支持invert,專門針對outline-color. 所以,如果你的項目不用管IE6/IE7瀏覽器,可以把outline掛在心中,有時候說不定會幫忙。

  3. 不占據空間  默認的盒模型下,假設元素100*100像素,我們給元素設置border:10px solid,則實際該元素占據的尺寸至少就是120*120像素,元素的偏移、布局啊什么的,就需要多多思量。

但是,outline不一樣,你哪怕outline:100px solid,元素占據的尺寸還是100*100像素。

這種行為表現,與transform以及box-shadow等CSS3屬性很類似,雖然外形豐滿了,但是,占據的真實空間沒有影響。

于是,我們在實現一些交互效果的時候,例如hover變化,我們就可以專注于效果本身,而不用被布局所左右,是很棒的體驗。

  4. 直角!圓角?  正好承上啟下一下。

  二、outline的直角與圓角  現有此效果一枚:

  一排60*60像素的直角圖片,選中的圖片外框2像素帶圓角高亮。

瀏覽器兼容要求,IE9 以及其他現代瀏覽器。

  一般而言,我們的第一反應是使用border border-radius。

但是,有個問題,就是,這里的外部高亮邊框效果是外擴的,要知道,border是會增加元素的尺寸的,于是,為了我們的完美對齊效果,還需要對選中元素做重定位,上下左右的margin值都需要改變。

我丟,想想就煩!  像這種UI表現,天生就是outline干的事情。

于是,我們大手一揮:  CSS Code復制內容到剪貼板  outline: 2px solid #26C2A7;

  高亮的邊框在哪里?在這里在這里!

  但是,不是圓角啊!  親愛的朋友,千萬不要妄圖通過border-radius來改變outline的圓角,要知道,outline跟border是近親,穿一個開襠褲長大的。

但是,媳婦可不能共享哈!border-radius和border是登記在案的光明夫妻,看,連姓氏都隨了夫君了,人家只認border, 你outline沒戲,找自己的媳婦止渴去。

  但是,outline貌似是個單身狗,沒有媳婦啊,難道outline注定一輩子直角,掰不彎了?  三、outline的圓角效果  茫茫CSS海,乍一看去,貌似沒有能讓outline圓角的東西。

注意措辭,貌似,我們如果有雙犀利的眼睛,還是會發現某處藏可以讓outline圓角的東西。

  在FireFox瀏覽器中,就有和outline匹對的圓角夫妻outline-radius,  其關系,就和border和border-radius的關系一樣。

  由于目前還只是FireFox瀏覽器私有的屬性,因此,目前的使用需要加-moz-前綴,也就是-moz-outline-radius.  聞名不如見面,若是火狐,您可以狠狠地點擊這里:FireFox下outline radius圓角效果Demo  效果如下截圖:

  相關CSS代碼如下:  CSS Code復制內容到剪貼板  img {  outline: 30px solid #cd0000;  -moz-outline-radius: 30px;  }  是不是很松松啊!如果你觀察足夠仔細,會發現,outline-radius和border-radius還是有區別的?看出來沒,區別在哪里?答對有獎哈,沒錯,你們都答錯了!沒有任何區別,outline-radius的圓角規則、語法之類跟border-radius就是一樣的。

  唯一的區別,也就是兼容性問題,不是看出來的,是試出來的。

告訴大家一個不幸的消息,目前,除了FireFox瀏覽器支持outline-radius,其他瀏覽器都是空大屁!  如果是僅webkit/blink瀏覽器支持還好說,至少移動端還可以用用,搞了個僅僅FireFox支持,玩毛線啊!不對,連毛線都沒得玩!  親,不要絕望啊,車到山前必有路,此路進去  四、box-shadow模擬outline的圓角效果  outline-radius雖然沒戲了,但是,我們可以使用其他屬性,可以實現類似的效果,比方說,圖形構建大神之一的box-shadow.  我們平時使用box-shadow最多的是前面3個參數,水平/垂直偏移以及模糊大小,可能有一些小伙伴并不清楚其第4個可選參數值究竟有何用?box-shadow第4個參數值,名外擴展,可以把投影范圍擴大,當然,擴大的區域是實色區域。

我們就可以利用這一特性,模擬實現不影響元素占據尺寸的outline實色邊框效果啦!  實例先行,您可以狠狠地點擊這里:CSS3 box-shadow模擬outline radius圓角Demo  CSS代碼如下:  CSS Code復制內容到剪貼板  img {  border-radius: 1px;  box-shadow: 0 0 0 30px #cd0000;  }  CSS3用的多的小伙伴應該知道,box-shadow的投影形狀與border-radius一脈相承,也就是border-radius是圓角的,box-shadow的投影也是圓弧形的。

于是,我們這里最終的效果就如下圖所示:

  下面簡單解釋下兩行CSS代碼的含義:  border-radius: 1px表示圓角大小1像素。

有同學可能奇怪了,怎么是1像素啊,截圖圓角明明好幾十像素,下面正好就解釋了;  box-shadow: 0 0 0 30px #cd0000出現了4個數值,分別是水平偏移0, 垂直偏移0,模糊0(純色), 擴展大小30像素。

我們可以想象成,光線直接從盒子的正上方照下來,因為沒有偏移沒有模糊,我們看不到任何陰影。

實際上,盒子的陰影正好就是盒子的大小(外帶1像素圓角),此時,擴展30像素,我們可以腦補一下,1像素圓角的陰影再擴展30像素。

喲,不就是我們需要的效果嘛,不就是截圖展示的效果嘛!  知道border-radius 1像素的左右了吧,擴展30像素后,圓角就是30像素大小了。

  然而,雖然肉眼看不出來,上面的方法實際有瑕疵,因為圖片不是純正的直角,有1像素的圓角。

如果你想實現完美的內方外圓的效果,可以套一層標簽,外面的標簽使用border-radius和box-shadow就可以了。

版權聲明:本文由 彭野雪 整理編輯。

原標題:outline of,sentence outline

轉載注明出處:http://www.dn9ww09s.icu/assemble/13880.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 自己做鈴聲的軟件,蘋果鈴聲制作軟件下載

    自己做鈴聲的軟件,蘋果鈴聲制作軟件下載 相關圖片鈴聲自制軟件很難厭倦聽到系統本身的鈴聲。當您使用喜愛的歌曲作為鈴聲時,如果前奏曲太長,您可以使用鈴聲制作軟件。有這么多常用的鈴聲制作軟件,哪一個比較好用?鈴聲快速...

  • 抖音怎么發5分鐘完整版,抖音怎么拍5分鐘長視頻

    抖音怎么發5分鐘完整版,抖音怎么拍5分鐘長視頻 相關圖片抖音上傳三分鐘以上視頻教程自助餐是一個非常有趣的視頻播放軟件,你可以通過自助餐展示你的才華。那么,你知道如何制作顫音的長視頻嗎?現在,超人軟件的小編輯想介紹一下如...

  • Flash教程,Flash動畫實例教程

    Flash教程,Flash動畫實例教程 相關圖片Flash動畫設計Flash CS4在界面上與之前的CS3版本沒有顯著差異。三維工具、裝飾工具和骨骼工具將添加到“工具”菜單中。已為MC添加動畫編輯器。腳本語言沒有改變,主要是針Flash動畫設...

  • 抖音暫時無法保存鏈接以復制,抖音保存他人視頻

    抖音暫時無法保存鏈接以復制,抖音保存他人視頻 相關圖片抖音不發布可以保存嗎自助餐是年輕人喜愛的視頻軟件。在這個軟件中,你可以觀看來自世界各地的人才上傳的視頻。如何將短視頻保存到相冊中?如何將Android版的短視頻發送到朋友圈...

  • 如何做靜態網頁,靜態網頁有哪些

    如何做靜態網頁,靜態網頁有哪些 相關圖片靜態網頁生成工具靜態網頁有時稱為平面網頁。靜態網頁的網址通常以HTML(超文本標記語言)結尾,并以超文本標記語言(。熱媒,。HTML),。Shtml,。XML(Extensib靜態網頁有哪些特點...

  • 企鵝電競金幣如何兌換,企鵝電競100金幣多少錢

    企鵝電競金幣如何兌換,企鵝電競100金幣多少錢 相關圖片企鵝電競如何充值金幣企鵝是騰訊推出的一款實時軟件。在這個軟件中,有虛擬貨幣金幣。那么企鵝電子競賽金幣有什么用呢?現在,超人軟件編輯想介紹一下如何直播企鵝e-race版iPho...

  • html長度,html5長度

    html長度,html5長度 相關圖片html輸入框大小在HTML中顯示大長度的數據時,可以截取和顯示數據,鼠標懸停時可以顯示完整的數據。例如,下面就是這種情況。實現:代碼如下:a title=${siteboardhtml控制數據長度...

  • 應用商店應用,安卓應用商店哪個好

    應用商店應用,安卓應用商店哪個好 相關圖片小米應用商店app與只有一家官方應用商店的IOS相比,Android的應用商店可謂百花齊放。除了多個平臺發布的應用商店外,中國多家知名手機廠商也推出了自己的應用商店。面對大量的應安...

  • 網頁設計 趨勢,UI設計趨勢和網頁設計趨勢一樣嗎

    網頁設計 趨勢,UI設計趨勢和網頁設計趨勢一樣嗎 相關圖片最好網頁設計如果你仔細觀察使用視差技術的最新網頁,你會發現這些網站使用的視差設計已經似是而非。這些頁面中有很多可移動的元素,但它們不是動畫;色彩搭配風格和視覺元素...

  • QQ上TIM在線是什么意思,tim在線是手機還是電腦

    QQ上TIM在線是什么意思,tim在線是手機還是電腦 相關圖片tim忙碌是手機還是電腦Tim是騰訊為office集團推出的一款聊天軟件。與QQ相比,它更加清新簡潔。沒有廣告。這是一個輕聊QQ的替代產品。好友和留言都與QQ同步,所以你可以直接從QQqq的...

熱評文章

  • 送男人什么禮物最難忘,送男友實用禮物排行榜

    送男人什么禮物最難忘,送男友實用禮物排行榜 相關圖片感動一個男生的套路我相信銀幕前有很多小姐妹都在擔心男友的生日。他們必須認真考慮該送什么禮物。你男朋友的生日禮物是什么?現在,超人軟件編輯會給你一些建議,告訴你什么...

  • 泰微課視頻在線觀看,免費微課視頻在線觀看

    泰微課視頻在線觀看,免費微課視頻在線觀看 相關圖片免費微課觀看親子成長是一個非常實用的教育軟件。通過這個軟件,家長和孩子們可以一起了解生活各個方面的習慣,學習他們在學校學不到的知識。那么家長和孩子怎么能一起長大看...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么第一步是隨意創建一個新的畫布,用﹐000066填充背景色,用鋼筆畫出基本形狀,羽毛邊框(半徑1),填充放射性梯度,并在濾光片外添加光線,效果如圖所示:第...

  • 天天練班級號,天天練怎么建班級

    天天練班級號,天天練怎么建班級 相關圖片樂樂課堂手機官網日常練習是一個非常好的閱讀和學習軟件。在這個軟件中,你可以通過回答問題來節省金幣作為禮物。那么如何在日常實踐中加入課堂呢?現在,超人軟件編輯還想為...

  • 編程的設計模式,編程設計模式有哪些

    編程的設計模式,編程設計模式有哪些 相關圖片java設計模式代碼我真的認為編寫CSS并不難,但是編寫可維護的CSS比其他編程語言更難。幸運的是,有很多資深人士提出了許多設計模式和思路。站在巨人的肩膀上,我們可以讓事情做得...

  • 魔獸世界沒聲音,魔獸世界聲音

    魔獸世界沒聲音,魔獸世界聲音 相關圖片魔獸世界調查聲音魔獸世界是一個非常實用的移動助理魔獸世界。在這個軟件中,用戶即使不登錄魔獸世界客戶端,也可以了解游戲的最新信息。不過,最近有朋友反映他們有點吵。我...

  • 存儲原理,存儲雙活詳解原理

    存儲原理,存儲雙活詳解原理 相關圖片3par存儲雙活解決方案說到web開發中的本地存儲,首先要考慮的是cookies。當然,第一批餅干都是已知的。主要的問題是它們太小了,大約4KB。而且,IE6每個域名只支持20個coo存儲框架...

  • 激萌跟抖音怎么合成?,抖音怎樣和激萌一起拍

    激萌跟抖音怎么合成?,抖音怎樣和激萌一起拍 相關圖片激萌里的變老在哪自助餐是一個非常有趣的照片美化軟件。在這個軟件里,你可以拍攝各種很酷的視頻。現在,你知道如何在自助餐中添加可愛的效果嗎?現在,超人軟件編輯想介紹如...

  • 什么的輪廓,耳輪廓

    什么的輪廓,耳輪廓 相關圖片輪廓度拿個手電筒在黑暗中向相機揮動,拍一張光軌的照片。這種沒有繪畫的輕涂鴉很受歡迎。它的魅力不僅體現在黑暗中耀眼的光輝上,更體現在人們對一幅隨時都會幻滅的美麗畫卷...

  • 雨中冒險2怎么刷月亮,qq怎么刷星星月亮

    雨中冒險2怎么刷月亮,qq怎么刷星星月亮 相關圖片qq的太陽星星怎么刷Shiba是一個非常好的實時軟件。當你成為錨后,你可以通過升級你的評級到月亮或太陽來賺取更多的錢。那怎么刷月亮和太陽呢?現在,超人軟件編輯也想介紹一下如...

關注微信

变脸官网查询