您現在的位置是:電腦技術吧?>? 編程技術 ??>??邊框透明,動態透明邊框??>??正文詳情

邊框透明,動態透明邊框

枝琳溪2019-11-15 11:30:42 人圍觀
簡介手機p圖邊框透明當CSS多邊框背景級別3仍然是草稿時,CSS工作組就是否支持多邊框進行了大量的討論,就像討論多背景圖片一樣。不幸的是,當時認為多個邊界并不有用,即使需要,也可

CSS多邊框  Backgrounds Borders Level 3 還是一份草案的時候,CSS WG 就在是否支持多重邊框的問題進行了大量的探討,就像是討論多重背景圖片一樣。

不幸的是,當時認為多重邊框的用處并不大,即使需要也可以使用border-image屬性來模擬。

不過,WG顯然忘記了在 CSS 代碼中靈活地調整邊框,才是我們需要的,現在開發者只能使用一些Hack手段來模擬多重邊框,比如使用多重元素的嵌套來模擬多重邊框。

現在,我將告訴你一些更優秀的方法,無需使用多余的標簽即可實現多重邊框。

  box-shadow解決方案  現在,大多數的時候都用box-shadow來創建陰影。

不過,很少有人知道它還接受第四個參數(spread),該參數可以縮放陰影的范圍。

比如下面的示例,我們創建了一個水平和垂直偏移量為0 的陰影,它就使用了上述所說的第四個參數:  CSS Code復制內容到剪貼板  background: yellowgreen;  box-shadow: 0 0 0 10px #655;  效果如下圖所示:

  圖注:使用 box-shadow 模擬邊框線  這還不夠令人驚訝,因為它和我們使用 border 創建的邊框差不多。

不過,強大的是我們可以使用逗號來創建任意數量的陰影。

所以,只需要繼續添加陰影就可以實現多重陰影了,比如,添加一個顏色為 deeppink 的邊框:  CSS Code復制內容到剪貼板  background: yellowgreen;  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;  唯一需要牢記的事情就是,box-shadow 屬性是疊在一起的,第一個陰影總是位于最頂層,所以你需要調整陰影的大小。

比如,在上一段代碼中,我們希望最外層的邊框為 5px,那么我們就可以設置一個 15px(10px 5px) 的陰影。

如果你需要,那么就可以為指定任意層次的陰影:  CSS Code復制內容到剪貼板  background: yellowgreen;  box-shadow: 0 0 0 10px #655,  0 0 0 15px deeppink,  0 2px 5px 15px rgba(0,0,0,.6);  除了下述的少數情況外,使用 box-shadow 的解決方案都很好用:  陰影并不是邊框,它們并不占有實際的空間,也不能歸屬于 box-sizing 的范圍。

不過,你可以通過使用內邊距或外邊距(取決于陰影是內部的還是外部的)占據額外的空間來模擬。

  上述示例模擬的邊框是位于元素外部的。

它不能捕獲類似懸停和點擊的鼠標事件。

如果事件很重要,那么可以通過添加 inset 關鍵字讓陰影出現在元素的內部。

注意,你可能需要添加額外的內邊距來擴充空間。

  outline的解決方案  在某些情況下,如果我們只需要兩層邊框,那么我們只需要一層常規的邊框和一層outline 就可以實現。

這也讓我們的邊框在樣式上保持了足夠的靈活性(比如我們想要一個虛線邊框),但是使用 box-shadow 的話,我們只能模擬出實線邊框。

如下圖所示:

  注:使用 box-shadow 模擬兩條輪廓線  CSS Code復制內容到剪貼板  background: yellowgreen;  border: 10px solid #655;  outline: 15px solid deeppink;  使用 outline 的另一個好處就是,我們可以通過 outline-offset 控制 outline 到元素邊框的距離,該屬性甚至可以接受負值。

這對很多效果都非常有用,如下圖所示:

  *注:對于虛線樣式的輪廓線,通過給 outline-offset 設置負值,創建了一個基礎的縫紉效果 *  不過,這種方法也有一些限制:  就像起初說的那樣,這種方法只能模擬兩層邊框,因為每個元素只能創建一個 outline。

如果需要創建多重邊框,那么只能使用 box-shadow 的方法。

  border-radius 并不能讓 outline 呈現圓角效果,所以,即使你的邊框是圓角的,outline 仍然是直角的(如下圖所示)。

注意,CSS WG 認為這是一個 bug,在未來border-radius可能可以將 outline 變為圓角。

  根據 CSS User Interface Level 3 specification 的說法:outliens 可能并不是矩形。

雖然大多數情況下它看起來像是矩形,但是在你使用這一方法時,還是需要進行跨瀏覽器測試的。

  圖注:通過outline創建的輪廓線并沒有貼合元素的圓角,這個問題在未來可能會被修正  border-colors解決方案  border-colors是一個獨特的屬性,從字面上來說就是為多邊框而生,只可惜的是,到目前為止這僅是Gecko內核瀏覽器獨有的屬性。

  如果不追究瀏覽器的兼容性,那么border-colors也可以實現多邊框的效果。

在具體使用時,需要分成四邊邊框來寫:  CSS Code復制內容到剪貼板  -moz-border-top-colors: *; /*頂邊邊框*/  -moz-border-right-colors: *; /*右邊邊框*/  -moz-border-bottom-colors: *; /*底邊邊框*/  -moz-border-left-colors: *; /*左邊邊框*/

  雖然這種方式也能實現多邊框效果,但相比前兩種解決方案而言要麻煩一些,來看一個簡單示例:  CSS Code復制內容到剪貼板  border: 10px solid;  -moz-border-top-colors: red red red red green green green blue blue blue;  -moz-border-bottom-colors: red red red red green green green blue blue blue;  -moz-border-right-colors: red red red red green green green blue blue blue;  -moz-border-left-colors: red red red red green green green blue blue blue;  為了要實現三個顏色的多邊框效果,red占4px,green占3px和blue點4px。

需要大費周折。

而且還不能直接寫border-colors,因為瀏覽器不識別這樣的屬性。

  除此之外,目前瀏覽器對這個屬性支持度相當的弱。

可以說,它只是Firefox的私有屬性。

  CSS透明邊框  對 CSS 中的半透明顏色可能已經有了基礎的了解,比如 rgba() 和 hsla()。

從 2009 年開始,雖然在開發設計中使用它們需要付出一些代價,比如提供降級措施、使用IE濾鏡,但是總得來說它是一個巨大的變革。

不過在實際中,它們主要被用于背景,有這么幾點原因:  早期的開發者沒有意識到這些新屬性就是類似 #ff0066 和 orange 的色彩,而是將它們看作是圖片,所以僅用在了背景上。

  為背景提供降級方案比其他屬性更簡單。

比如,可以直接使用單像素的半透明圖片替代半透明背景。

對于其他屬性,則只能使用不透明顏色。

  在其他屬性上使用半透明顏色,比如邊框,并不簡單,我們將在下文介紹原因。

  圖注:24ways.org 是第一個在設計中使用半透明顏色的網站,那時還是 2008 年,那時它們網站的特點就是使用了大量的背景(由 Tim Van Damme 設計)  假設我們想要美化一個容器,讓它擁有一個白色的和半透明白色的邊框這個半透明邊框可以讓它后面的內容顯示出來。

我們要做的第一步就像是下面這樣:  CSS Code復制內容到剪貼板  border: 10px solid hsla(0,0%,100%,.5);  background: white;  除非你非常了解background和border這兩個屬性的工作原理,否則上面代碼得到的結果會讓你感到非常的困惑。

邊框哪里去了呢?是不是不能為邊框添加半透明顏色呢?到底該怎么做?

  圖注:第一次嘗試實現半透明邊框  解決方案  雖然看起來的效果和預期有所差異,其實邊框是存在的。

實際上,背景色默認會擴展到邊框上,這一點可以通過給邊框添加虛線觀察到。

如下圖所示:

  圖注:背景默認會擴展到邊框區域下方  雖然這和你使用不透明的實線邊框是一樣的,但在這個示例中,它完全推翻了我們的預期。

結果看起來是純白色的邊框,實際上是一個半透明白色的邊框,然后在它下面是白色的背景色。

  在 CSS 2.1 中,這就是 background 的工作原理。

我們不得不接受和使用它。

值得慶幸的是,在Backgrounds Borders Level 3中,我們已經可以使用background-clip 屬性來調整這一效果。

background-clip的默認值為border-box,也就是說,背景色會填充到容器邊框以及邊框以內的地方,所以我們只需要將其修改為padding-box(讓背景色在容器的內邊距以及內邊距以內填充)就可以實現所需要的效果了:  CSS Code復制內容到剪貼板  border: 10px solid hsla(0,0%,100%,.5);  background: white;  background-clip: padding-box;  更完善的效果如下圖所示:

  圖注:修正了 background-clip 的問題  總結  雖然在border-color上能運用rgba()、hsla()設置邊框為半透明或完全透明,如果元素設置了背景顏色或背景圖片的時候,會直接影響邊框的透明顏色效果。

特別是,要看到邊框底下的內容時。

造成這個現象是由于背景圖片會延伸到邊框底部。

要解決這一問題,可以通過CSS3的background-clip來修正。

@Chris Coyier早在2010年的時候就在CSS-Tricks詳細介紹過這方面的知識。

版權聲明:本文由 枝琳溪 整理編輯。

原標題:照片透明邊框怎么弄,透明邊框的軟件是什么

轉載注明出處:http://www.dn9ww09s.icu/program/12481.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • win8怎么清理c盤,c盤滿了怎么清理win8

    win8怎么清理c盤,c盤滿了怎么清理win8 相關圖片c盤滿了怎么清理win10現在win10系統的份額逐漸接近win7,這意味著越來越多的用戶開始選擇win10。同樣,win8的用戶在厭倦使用win8后,也希望升級到win10。他們想知道win7如何深度清理c盤...

  • opacity屬性,resize屬性

    opacity屬性,resize屬性 相關圖片html透明度屬性RGBA和opacity語法:R:紅色值。正整數|百分比G:綠色值。正整數百分比B:藍色值。正整數百分比A:透明度。值0~1,將CSS代碼復制到剪貼板/*IE6transform屬性...

  • garageband怎么用不了,garage band怎么用

    garageband怎么用不了,garage band怎么用 相關圖片garageband錄音怎么用Garageband是蘋果的數字音樂創作軟件,也可以在iPhone上使用,主要面向業余愛好者。它包括1000首預先錄制好的旋律樣本和50首合成樂器樣本,可以使用garageband電腦版用...

  • 移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦

    移動硬盤沒有盤符顯示,電腦不顯示移動硬盤怎么辦 相關圖片電腦讀取不了移動硬盤許多人使用移動硬盤來存儲和傳輸數據。移動硬盤的即插即用非常方便。但也有部分用戶遇到了移動硬盤不顯示的情況。我們該怎么辦?一。當移動硬盤不顯示時...

  • 循環利用標識1,循環利用標志

    循環利用標識1,循環利用標志 相關圖片循環利用標志內1在制作網站時,我們經常需要處理客戶的企業身份。如果你的網站有另一種顏色背景,你需要顛倒客戶提供的商標的白色。當客戶只提供背景為白色的JPG圖像文件時,您...

  • win7正版永久激活密鑰,win7旗艦版最新密鑰

    win7正版永久激活密鑰,win7旗艦版最新密鑰 相關圖片win7旗艦版永久激活Windows 7旗艦的激活碼可以用于windows7旗艦的激活,用戶可以正常使用windows7旗艦的全部功能。與其他激活方法相比,使用Windows 7旗艦w7旗艦版激活碼...

  • flash動畫格式,flash動畫文件格式

    flash動畫格式,flash動畫文件格式 相關圖片Flash動畫實例教程swf格式的flash動畫體積小,傳輸方便,深受網民歡迎。然而,令人遺憾的是,許多在線論壇只允許圖片,而不允許flash動畫。如果你手上有一些美妙的閃光,并渴望flas...

  • 蘋果六藍牙怎么無法連接,iphone11藍牙連接不上

    蘋果六藍牙怎么無法連接,iphone11藍牙連接不上 相關圖片蘋果之間藍牙連接不上蘋果手機有時需要連接到藍牙設備,如藍牙耳機,以便更方便地聽音樂、看視頻和打電話。但有些用戶很少使用這個功能,不知道如何連接蘋果藍牙?一。在IOS設...

  • 怎樣改apple id和密碼,蘋果apple id密碼怎么修改

    怎樣改apple id和密碼,蘋果apple id密碼怎么修改 相關圖片id密碼怎么改使用iPhone,蘋果ID密碼非常重要。沒有蘋果ID和密碼,很多蘋果服務都無法正常使用,包括應用程序下載和云服務。出于安全原因,Apple ID密碼應該分開改id密碼...

  • 交互設計作品集欣賞,交互設計作品集輔導

    交互設計作品集欣賞,交互設計作品集輔導 相關圖片國外平面設計作品集一些學生經常問互動如何反映自己的作品和能力,所以今天我們來談談新的互動設計師作品宣言的制作:本文所使用的所有材料都是授權學習和交流的,不得用于任...

熱評文章

  • 三星s4卡刷教程,三星s4刷什么系統最好

    三星s4卡刷教程,三星s4刷什么系統最好 相關圖片三星手機s4怎么刷機三星S4是一款非常老的機型。現在大多數用戶將它用作存儲備用機器。該機配備了exynos 5410雙核處理器,運行Android 4.2.2 touchwiz系統三星手機如何刷機...

  • 交互設計,交互設計怎么做

    交互設計,交互設計怎么做 相關圖片為什么做了交互設計還要做動效今天,我花時間看了看銀色的插件。這是第一個內置到sketch中的交互式插件。通過它,可以在不依賴其他軟件的情況下完成草圖交互方案的設計和顯示。...

  • origin客戶端安裝慢,origin平臺下載游戲速度慢

    origin客戶端安裝慢,origin平臺下載游戲速度慢 相關圖片origin平臺下載速度慢Origin是EA在2011年搭建并推出的一個全方位的游戲社交平臺。它集成了數字游戲購買、物理版本激活、下載、數據云存儲、社交網絡等功能,正在逐步增加更多功能。...

  • css background屬性,css中background

    css background屬性,css中background 相關圖片html中background背景大小的值類型:1或2個值。這些值可以是像素Px、百分比%或自動,也可以是特定值cover和contain。可以為背景大小設置兩個值,一個是必需的,另一個是可css display屬性...

  • win7旗艦版優化設置,win7系統最流暢優化

    win7旗艦版優化設置,win7系統最流暢優化 相關圖片win7設置優化大全很多人在安裝了win7系統之后就開始使用它了。事實上,如果你對win7做了一些設置,你的系統在win7安裝后會更流暢,更省電,更好的使用,你可以清理垃圾和無效的win...

  • 苯磺酸氨氯地平片價格,湖南天雁股吧

    苯磺酸氨氯地平片價格,湖南天雁股吧 相關圖片ST信威在手機撥號界面輸入具體指令,查詢相應的手機信息。有些用戶不知道**Chen 06的用途,所以本文將與您分享**chen06找到的信息是什么?每個手機都有一個世界000760斯太爾股吧...

  • 居中顯示,div居中顯示

    居中顯示,div居中顯示 相關圖片設置表格居中代碼如下:div style=width:1000px;margin:0auto;div style=background color:red;text ali頁碼居中怎么設置...

  • bios硬盤啟動順序,bios設置硬盤啟動

    bios硬盤啟動順序,bios設置硬盤啟動 相關圖片bios設置ssd第一啟動盤許多計算機用戶不知道,當計算機啟動時,他們會從硬盤中尋找啟動文件來啟動系統。如果硬盤不是第一個引導項目,或者有兩個硬盤,系統將無法啟動。有時,有...

  • 交互設計作品集輔導,交互設計作品

    交互設計作品集輔導,交互設計作品 相關圖片北京交互設計作品集培訓斯佩爾(中國設計總監):我想我首先需要了解的是,為什么我們需要一個投資組合來尋找互動設計或其他設計工作。從我采訪各個設計師的經驗來看,作品集...

  • 高通驍龍625怎么樣,驍龍625處理器怎么樣

    高通驍龍625怎么樣,驍龍625處理器怎么樣 相關圖片驍龍660一些入門級手機使用小龍450,這個CPU呢?小龍450是小龍發布的中低端移動SOC,但事實上,沒有一款中端機型會選擇小龍450。450多臺小龍用于小龍450采用驍龍660怎么樣...

關注微信

变脸官网查询