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

邊框透明,動態透明邊框

朋香馨2019-12-02 14:42:15 人圍觀
簡介手機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/assemble/15000.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • css3 transition,transitioncss3多個

    css3 transition,transitioncss3多個 相關圖片css3本文通過實例說明了基于CSS3屬性轉換的菜單導航效果。與您分享以供參考。具體如下:CSS3導航菜單,當你的運動層在顯示層下面時,由于在CSS動畫的初始渲染中chcss3on...

  • 簡單的二級菜單代碼,html菜單代碼

    簡單的二級菜單代碼,html菜單代碼 相關圖片c語言菜單代碼本文的例子描述了用純CSS實現多級半透明效果菜單的代碼。與您分享以供參考。具體如下:這是一個基于CSS的多級半透明菜單,可以支持多達5級的CSS菜單。菜單樣式可ht...

  • opacity屬性,resize屬性

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

  • 寬度自適應,網頁寬度自適應

    寬度自適應,網頁寬度自適應 相關圖片表格自適應寬度本文以CSS為例實現了菜單寬度自適應的按鈕效果代碼。與您分享以供參考。具體如下:這是一個基于CSS的自適應寬度按鈕效果代碼。你可以說這個效果是一個菜單或者C...

  • line-height,line height什么意思

    line-height,line height什么意思 相關圖片line size讓我們回顧一下行高的基本知識:語法:行高:normal |實數|長度|百分比|繼承描述:設置元素中行的高度。值:normal:默認行高,一般為1到1.2;實數:lineweight...

  • 模型蝕刻片用法,模型補土用法

    模型蝕刻片用法,模型補土用法 相關圖片模型 蝕刻片根據CSS可視化格式化模型的規則,可視化類型的媒體對文檔樹中的元素進行處理,從而將(x)html轉換為生產者設計的圖像。例如:如何生成元素框;如何處理元素之間的做...

  • 視差效果,視差

    視差效果,視差 相關圖片視差貼圖視差效應在互聯網上越來越流行。如果你還沒有聽說過視差效應,那實際上就是用圖片形成不同的圖層,分別以不同的速度和方向移動的效果。這將產生非常美妙的視覺效果,...

  • 代碼生成工具,代碼文檔生成工具

    代碼生成工具,代碼文檔生成工具 相關圖片生成代碼今天的資源是完全免費的webapps,可以為模板、漸變甚至瀏覽器屬性的前綴生成CSS3代碼。如果您是一個前端開發人員,這些資源可以幫助您節省大量時間,并為以后的java圖形界...

  • 編程注釋,Java注釋

    編程注釋,Java注釋 相關圖片plc編程中注釋顯示CSS注釋和HTML教程中描述的注釋一樣,在CSS文檔中也起著重要的作用。它們可以幫助我們記住CSS的含義、加載到HTML文檔的位置等。CSS注釋的開頭是/*,c語言如何快速注釋...

  • 漸變濾鏡如何使用,漸變灰濾鏡怎么用

    漸變濾鏡如何使用,漸變灰濾鏡怎么用 相關圖片ps漸變濾鏡怎么用在CSS3和IE過濾器中實現線性漸變對完美主義者來說是一件痛苦的事情,就像不去挑選一塊垃圾一樣。所以對于普通的漸變,那些可以用CSS解決的不使用圖片。CSS3為漸變...

熱評文章

  • gradient,gradient elution

    gradient,gradient elution 相關圖片求gradientCSS3梯度分為線性梯度和徑向梯度。線性梯度在WebKit中的應用CSS代碼復制內容到剪貼板WebKit線性梯度(gradient怎么求...

  • animation屬性,animation的屬性及其意思

    animation屬性,animation的屬性及其意思 相關圖片animation元素一、animation的語法   1、@keyframes插入關鍵幀  (1)FormTo形式:  CSS Code復制內容到剪貼板  @keyframes danimation教程...

  • 屬性的使用無效,如何使用被隱藏的屬性

    屬性的使用無效,如何使用被隱藏的屬性 相關圖片三代五屬性頁面上顯示的每個元素(包括內聯元素)都可以視為一個框模型。查看chrome devtools中的屏幕截圖:可以看到box模型由四個部分組成。從內到外:內容填充全能屬性如何使用...

  • border radius屬性,border-radius

    border radius屬性,border-radius 相關圖片textdecoration屬性邊界半徑是一種縮寫方法。如果前/后和/或后存在值,則設置/設置其水平半徑,并設置/設置其垂直半徑后的值。如果沒有/,則水平和垂直半徑相等。CSS代碼將內容復制到...

  • magisk模塊編寫,python模塊有哪些

    magisk模塊編寫,python模塊有哪些 相關圖片python模塊大全印刷媒體(如雜志或報紙)在網站上的最大優勢是頁面和段落布局的靈活性。例如,打印媒體能夠優雅地填充多個列,甚至如下面的屏幕截圖所示的那樣復雜。然而,由于...

  • scale的用法,range和scale用法區別

    scale的用法,range和scale用法區別 相關圖片scale的音標縮放屬性語法:Zoom:normal | |;默認值:normal應用于:所有元素的繼承:with value:normal:使用對象的實際大小。:使用浮點數定grant的用法...

  • fontsize屬性,font和fontsize

    fontsize屬性,font和fontsize 相關圖片css font size基本語法結構:字體大小 字體大小值 單位字:字體大小語法:字體大小:絕對大小|相對大小|長度值:x x small | x smallfontsize單位html5...

  • text—decoration,decorative text

    text—decoration,decorative text 相關圖片text怎么用定義并使用文本裝飾屬性指定添加到文本的裝飾。注意:飾面的顏色由“顏色”屬性設置。說明此屬性允許您對文本設置一些效果,例如下劃線。如果子元素沒有自己的裝飾,...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

  • 百分比是單位嗎,百分比怎么算

    百分比是單位嗎,百分比怎么算 相關圖片計算百分比視區單位視區單位是相對單位,這意味著它們沒有客觀尺寸。它們的大小由視區的大小決定。這里有四個與視區相關的單位。我會把重點放在前兩個單元上,因為它們更有可...

關注微信

变脸官网查询