




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
CSS3屬性-設(shè)置圖片邊框樣式信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備邊框圖片設(shè)置1邊框圖片切片2邊框圖片寬度3邊框圖片外偏移5組合屬性6邊框圖片平鋪方式401設(shè)置邊框圖片前端技術(shù)開發(fā)邊框圖片設(shè)置前端技術(shù)開發(fā)01border-image-source:url(圖片路徑)設(shè)置邊框圖片源:
僅border-image-source屬性無法顯示邊框圖片效果,需要設(shè)置邊框圖片寬度。div{
border-image-source:url(img/border.png);}路徑一般使用相對(duì)路徑前端技術(shù)開發(fā)02邊框圖片寬度邊框圖片寬度設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框圖片寬度:border-image-width:length|%|auto;語法說明:
length設(shè)置數(shù)值,需要單位,如:20px。%設(shè)置百分比,相對(duì)于所在元素的長(zhǎng)度或?qū)挾冗M(jìn)行圖片縮放。
auto一般為元素長(zhǎng)度或?qū)挾龋ㄝ^小者)的一半。
可取1-4個(gè)值,按順時(shí)針方向表示四個(gè)方向上的邊框?qū)挾?。邊框圖片寬度設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框圖片,同時(shí)設(shè)置邊框圖片寬度div{
border-image-source:url(img/border.png);
border-image-width:30px;}邊框圖片只出現(xiàn)在四個(gè)角位置,因此設(shè)置邊框還需要結(jié)合圖片切片屬性。前端技術(shù)開發(fā)03邊框圖片切片邊框圖片切片設(shè)置前端技術(shù)開發(fā)03border-image-slice:number|%|fill;設(shè)置邊框圖片切片:語法說明:
可使用數(shù)字1~4個(gè)值,類似border屬性設(shè)置,不要寫單位,默認(rèn)像素。
可使用百分比1~4個(gè)值。fill可選項(xiàng),填充元素內(nèi)容,類似背景圖效果。邊框圖片切片設(shè)置前端技術(shù)開發(fā)03div{
border-image-source:url(img/border.png);
border-image-slice:33%33%;}圖片四個(gè)角固定為元素的四個(gè)角,可設(shè)置1-4個(gè)值,按順時(shí)針方向(上、右、下、左)切分成9個(gè)方格。中間的方格為透明,即不顯示。邊框圖片切片設(shè)置前端技術(shù)開發(fā)03設(shè)置圖片切片后,不同的邊框圖片寬度:div{
border-image-source:url(img/border.png);
border-image-slice:33%33%;
border-image-width:20px;}寬度:30px寬度:20px前端技術(shù)開發(fā)04邊框圖片平鋪方式邊框圖片平鋪設(shè)置前端技術(shù)開發(fā)04設(shè)置邊框圖片重復(fù)方式:border-image-repeat:stretch|repeat|round;屬性值描述repeat取值為repeat時(shí),表示4條邊的小方塊會(huì)不斷重復(fù),超出元素部分將會(huì)被剪切掉。round取值為round時(shí),表示4條邊的小方塊會(huì)鋪滿。為了鋪滿,邊框圖片會(huì)壓縮或拉伸。stretch取值為stretch時(shí),表示4條邊的小方塊會(huì)拉伸,邊長(zhǎng)有多長(zhǎng)就拉多長(zhǎng)。屬性值說明如表所示。邊框圖片平鋪設(shè)置前端技術(shù)開發(fā)04設(shè)置圖片邊框重復(fù):div{
border-image-source:url(img/border.png);
border-image-slice:33%33%;
border-image-width:20px;
border-image-repeat:repeat;}srecthroundrepeat前端技術(shù)開發(fā)05邊框圖片外偏移邊框圖片外偏移前端技術(shù)開發(fā)05設(shè)置邊框向外偏移:border-image-outset:length|number;div{
width:200px;height:200px;background:#ccc;
border-image-source:url(img/border.png);
border-image-slice:33%33%;
border-image-width:20px;border-image-repeat:repeat;
border-image-outset:0px;}向外偏移:0向外偏移:10px前端技術(shù)開發(fā)06組合屬性邊框圖片組合屬性前端技術(shù)開發(fā)06border-image:url(border.png)30303030/20pxrepeat設(shè)置圖片路徑設(shè)置圖片切割方式和寬度border-image:圖片路徑
圖片切片方式/寬度
圖片平鋪方式;
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年電子美容儀合作協(xié)議書
- 2025年磁卡寬片項(xiàng)目建議書
- 葡萄酒產(chǎn)業(yè)生態(tài)鏈投資與窖藏倉儲(chǔ)合作合同
- 氫燃料電池系統(tǒng)環(huán)境適應(yīng)性測(cè)試員協(xié)議
- 紅籌架構(gòu)下合資企業(yè)股權(quán)合作與收益分配協(xié)議
- 裝載機(jī)司機(jī)培訓(xùn)課程大綱
- 醫(yī)療查房車租賃及遠(yuǎn)程醫(yī)療診斷服務(wù)合同
- 電商商品上架與用戶隱私保護(hù)服務(wù)合同
- 國際旅行者數(shù)據(jù)加密海外醫(yī)療保險(xiǎn)租賃合同
- 獨(dú)家品牌代理補(bǔ)充協(xié)議
- 2025年四川省成都市錦江區(qū)中考二診物理試題(含答案)
- 儲(chǔ)能產(chǎn)業(yè)研究白皮書2025摘要版
- 曲靖市社區(qū)工作者招聘真題2024
- 2024年新疆阿合奇縣事業(yè)單位公開招聘村務(wù)工作者筆試題帶答案
- 2025年浙江省杭州市西湖區(qū)中考數(shù)學(xué)一模試卷
- 2025年中國ARM云手機(jī)行業(yè)市場(chǎng)運(yùn)行格局及投資前景預(yù)測(cè)分析報(bào)告
- 基層應(yīng)急管理能力提升與建設(shè)
- 小學(xué)生脫口秀課件
- 混凝土配合比試驗(yàn)設(shè)計(jì)方案
- 抖音陪跑合同協(xié)議
- 高三尖子生、邊緣生輔導(dǎo)方案2
評(píng)論
0/150
提交評(píng)論