首頁 web前端 前端問答 css3怎麼實現花邊邊框

css3怎麼實現花邊邊框

Sep 16, 2022 pm 07:11 PM
css css3

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

css3怎麼實現花邊邊框

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可以利用border-image屬性來實作花邊邊框。

css border-image屬性

#border-image屬性可以使用圖片來建立邊框,也就是給邊框加上背景圖片。沒錯,就是平常那一小小條的邊框,也能加圖。

border-image是一個簡寫屬性:

  • border-image-source:用於指定要用於繪製邊框的圖像的位置

  • border-image-slice:圖像邊界向內偏移

  • border-image-width:圖像邊界的寬度

  • border-image-outset:用於指定在邊框外部繪製border-image-area 的量

  • border-image-repeat:用於設定影像邊界是否應重複(repeat )、拉伸(stretch)或鋪滿(round)。

省略的值設定為它們的預設值。

1、border-image-source: url()

#設定邊框圖片的路徑

2、border-image-slice: 100 100 100 100 fill

用以指定從哪4 個位置分割影像(遵循上右下左的順序)。

參數可以填入5個, 前1~4 個參數是依照線的位置分割,依照上右下左的順序分割, 值的設定跟其他值的縮寫方式一樣,   提供2個值就是   上下和  左右, 提供1個值就設定4條線的位置。  注意 只能填數字, 百分比, 不能加上px。   100 就等於 100px

那麼到底是怎麼分割法的呢,看下面的圖片詳解,看起來可能有點亂, 認真看,還是看得懂的呢。藍色數字 9 ,是內容區。如果不填上第五個參數 fill, 是會空白的。

 

3、border-image-width:  1

設定邊框圖片的寬度。可以設定 數字, 和 px, 數字的話是幾倍的意思。 1的話, 就是 1 *  border-width,  也可以設定auto。 auto的計算方式是,取 border-image-slice 的值,然後加上 px   如果border-image-slice 的值為 100, 那麼取過來, 加上 px  就是 100px。

4、border-image-outset: 100px 100px 100px 100px

在原來的基礎上, 上右下左擴大100px ,  可以簡寫。  也可以設定數字, 數字也一樣。是幾倍的意思。 1 代表1倍  也就是1* border-width(100) = 100px

 

#5、border- image-repeat: 

參數:stretch  repeat  round  space

」依照什麼方式來平鋪。可填 兩個參數,  一個參數, 代表 四個方向的平鋪一樣。  兩個參數,第一個值 代表 水平方向,第二個值代表 垂直方向。

網路截圖,截的不好, 所以有中間那個小紅點,忽略它就好。  這個方法,相容情況不是很好,通常沒有特殊情況,不會去設定它的。

最後,簡單寫方式: 

#只能填,三個參數。   slice  和repeat  是可以填多個數值的。 

border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;                
/* 简写: 三个参数  source  slice  repeat */

(學習影片分享:css影片教學web前端

以上是css3怎麼實現花邊邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

PHP教程
1537
276
如何在CSS中使用大眾和VH單元 如何在CSS中使用大眾和VH單元 Aug 07, 2025 pm 11:44 PM

vw和vh單位通過將元素尺寸與視口寬度和高度關聯,實現響應式設計;1vw等於視口寬度的1%,1vh等於視口高度的1%;常用於全屏區域、響應式字體和彈性間距;1.全屏區域使用100vh或更優的100dvh避免移動瀏覽器地址欄影響;2.響應式字體可用5vw並結合clamp(1.5rem,3vw,3rem)限制最小和最大尺寸;3.彈性間距如width:80vw、margin:5vhauto、padding:2vh3vw可使佈局自適應;需注意移動設備兼容性、可訪問性及固定寬度內容衝突,建議優先使用dvh

虛擬貨幣交易app有哪些_2025正規虛擬貨幣交易app推薦前十名 虛擬貨幣交易app有哪些_2025正規虛擬貨幣交易app推薦前十名 Aug 08, 2025 pm 06:42 PM

1、Binance币安以庞大的交易量和丰富的交易对著称,提供多元交易模式与完善生态系统,并通过SAFU基金和多重安全技术保障用户资产安全且高度重视合规运营;2、OKX欧易提供广泛的数字资产交易服务和统一交易账户模式,积极布局Web3领域,并通过严格风控和用户教育提升交易安全与体验;3、gate.io芝麻开门以上币速度快和币种丰富见长,提供多样化交易工具与增值服务,采用多重安全验证机制并坚持资产储备透明化以增强用户信任;4、火币Huobi凭借深厚的行业积累提供一站式数字资产服务,拥有强大交易深度与

如何使用CSS創建垂直線 如何使用CSS創建垂直線 Aug 11, 2025 pm 12:49 PM

使用帶邊框的div可快速創建垂直線,通過設置border-left和height定義樣式和高度;2.利用::before或::after偽元素可在無額外HTML標籤的情況下添加垂直線,適合裝飾性分隔;3.在Flexbox佈局中,通過設置divider類的寬度和背景色,可實現彈性容器間的自適應垂直分隔線;4.在CSSGrid中,將垂直線作為獨立列(如auto寬度列)插入網格佈局,適用於響應式設計;應根據具體佈局需求選擇最合適的方法,確保結構簡潔且易於維護。

如何在CSS中使用過濾器屬性 如何在CSS中使用過濾器屬性 Aug 11, 2025 pm 05:29 PM

TheCSSfilterpropertyallowsvisualeffectslikeblur,brightness,andgrayscaletobeapplieddirectlytoHTMLelements.1)Usethesyntaxfilter:filter-function(value)toapplyeffects.2)Combinemultiplefilterswithspaceseparation,e.g.,blur(2px)brightness(70%).3)Commonfunct

如何有效使用CSS選擇器 如何有效使用CSS選擇器 Aug 11, 2025 am 11:12 AM

使用CSS選擇器時應優先採用低特異性選擇器,避免過度限定;1.理解特異性層級,按類型、類、ID順序合理使用;2.多用類名提升可複用性和可維護性;3.適度使用屬性和偽類選擇器,避免性能問題;4.保持選擇器簡短且作用域明確;5.採用BEM等命名規範提升結構清晰度;6.避免濫用標籤選擇器和:nth-child,優先使用工具類或模塊化CSS,確保樣式長期可控。

CSS混合混合模式示例 CSS混合混合模式示例 Aug 08, 2025 pm 12:59 PM

mix-blend-mode屬性用於控制元素內容與背景的混合效果,1.使用multiply可實現文字與背景圖的正片疊底融合;2.screen使圖像變亮,適合深色背景;3.overlay增強對比,結合multiply與screen特點;4.difference產生強烈反差,適用於創意設計;需確保元素重疊及正確的z-index層疊順序,配合isolation:isolate可限制混合範圍,通過調整顏色與模式可實現豐富的視覺效果。

如何更改CSS中的列表樣式 如何更改CSS中的列表樣式 Aug 17, 2025 am 10:04 AM

要更改CSS列表樣式,首先使用list-style-type改變項目符號或編號樣式,1.使用list-style-type設置ul的項目符號為disc、circle或square,ol的編號為decimal、lower-alpha、upper-alpha、lower-roman或upper-roman,2.用list-style:none完全移除標記,3.使用list-style-image:url('bullet.png')替換為自定義圖像,4.通過list-style-position:in

如何防止CSS中的線路斷裂 如何防止CSS中的線路斷裂 Aug 08, 2025 pm 05:14 PM

Usewhite-space:nowraptopreventtextfrombreakingontomultiplelines,ensuringcontentstaysonasingleline;2.Applythispropertytoinline,inline-block,orflexitems,whereflex-wrap:nowrappreventsitemwrappingandwhite-space:nowrappreventsinternaltextwrapping;3.Forspe

See all articles