CSS魔法堂：重拾Border之——圖片作邊框

前言

?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比例分配元素寬度時，不禁會問"我真的懂border嗎？"。本系列將稍微深入探討一下那個貌似沒什么好玩的border！
《CSS魔法堂：重拾Border之——解構Border》
《CSS魔法堂：重拾Border之——圖片作邊框》
《CSS魔法堂：重拾Border之——不僅僅是圓角》
《CSS魔法堂：重拾Border之——更廣闊的遐想》

解構border-image

347002-20160430231727800-188898816.png

<style type="text/css">
div {border: double orange 1em;border-image: url("border.png") 27 round stretch;
}
</style>
<div>........</div>

?起初瀏覽一遍border-image的用法時，總以為就是border變粗了，然后以圖片作為Line Pattern，接著是各種平鋪方式就完事了。后來細讀W3C Spec，發現我還是2 young 2 simply了，簡稱太2了。
?要理解好border-image，那么先要理解它由那幾類對象組成，對象間的關系和組合規則。

3個和尚有水喝

  1. 目標元素本身(即上面的div元素)
  2. 用作邊框素材的圖片(即上面的border.png)
  3. 貼圖區(Border Image Area)

引入圖層概念

?用過PS或Flash的同學應該都清楚圖層的概念吧，反正我是現在才理解圖層的:(
目標元素和貼圖區分別位于兩個圖層，并且貼圖區所在的圖層位于目標元素所在的圖層之上，而素材圖片經切割后將在貼圖區圖層上作后期處理，最后作圖層合成處理。
?重申3點

  1. 目標元素和素材的圖片分別在各自獨立的圖層上繪制;
  2. 圖片會經過切割后，按規則在所屬圖層上的貼圖區內作定位和平鋪處理;
  3. 圖片所屬圖層在目標元素所在圖層之上。

透過屬性看本質

?在理解border-image的組成和整體處理流程后，我們先通過屬性來認識與圖片和貼圖區密切相關的知識——圖片切割/切片和貼圖區切割/切片

圖片切割/切片

  1. 屬性border-image-source
    作用：引入用作邊框素材的圖片資源
    語法：border-image-source:url("image url")
    url入參為圖片路徑，可以是HTTP或HTTPS Scheme URI下的絕對或相對路徑，或采用Data Scheme URI。
  2. 屬性border-image-slice
    作用：對通過border-image-source引入的圖片資源，以九宮格的形式作切片
    語法：border-image-slice: [<percentage> | <number>]{1,4} fill?
    屬性值的順序和簡寫時語法擴展的規則與屬性border-width一致(top,right,bottom,left)，而其含義為距離圖片各邊(top/right/bottom/left)多遠的位置上，畫一條與對應邊相互平衡的切割線。注意：切割線必須位于圖片所在面積內
    <percentage>:以圖片的尺寸(寬、高)作為參考系，設置距離各邊的距離。默認值為100%
    <number>:設置距離各邊的絕對距離，單位固定為px
    fill:設置是否將九宮格里正中間的切片，應用到貼圖區中。默認值為禁用，即默認情況下九宮格中僅有8塊切片會應用到貼圖區中。

注意
?當水平方向(left/right)的切片重疊時，會導致top、middle和bottom切片的尺寸為0;
?當垂直方向(top/bottom)的切片重疊時，會導致left、middle和right切片的尺寸為0;
?因此默認情況下border-image-slice: 100%，所以top/right/bottom/left/middle的切片尺寸均為0，而4個角top-left/right和bottom-left/right切片的尺寸為整張圖片，因此最后結果僅看到邊框4個角有圖片，而4邊卻沒有顯示。

示意圖：
347002-20160430231743035-1692501773.png
4條灰色線表示切割線，它們和圖片的4條邊框一起把圖片劃分為九宮格，得到以下9幅切片。
347002-20160430231758097-73935276.png

貼圖區(Border Image Area)切割/切片

?相對目標元素和素材圖片而言，貼圖區由于無法直接觀察，導致比較難理解。

  1. 默認情況下貼圖區與目標元素完全重疊;
  2. 貼圖區同樣被劃分成9塊區域，分別對應素材圖片的9塊切片。默認情況下貼圖區中除middle區域外，其他區域的尺寸與目標元素的border box一致。
    347002-20160430231820222-1424710628.png
  3. 通過border-image-width可修改各區域的尺寸；

  4. 通過border-image-outset可修改貼圖區的尺寸。
    347002-20160430231842253-1625524352.png

    border-image-outset: 12px;
  5. 屬性border-image-width
    作用：以九宮格的形式對貼圖區進行切片
    語法：border-image-width: [<length> | <percentage> | <number> | auto]{1,4}
    屬性值的順序和簡寫時語法擴展的規則與屬性border-image-slice一致(top,right,bottom,left)，而其含義為距離貼圖區各邊(top/right/bottom/left)多遠的位置上，畫一條與對應邊相互平衡的切割線。注意：切割線必須位于貼圖區所在面積內
    <length>:設置距離各邊的絕對距離，負數無效。
    <percentage>:以貼圖區的尺寸(寬、高)為參考系，設置距離各邊的距離
    <number>:以對應的border-width為參考系，設置距離各邊的距離。默認值為1
    auto:設置為與素材圖片中對應的切片一致
    注意：若貼圖區水平方向(left/right)或垂直方向(top/bottom)的區域發生重疊，則會對其進行縮放直到不發生重疊為止。計算縮放因子的公式f = min(width/(left + right), height/(top + bottom))，然后left/right/top/bottom4個區域則按縮放因子進行縮放操作。

  6. 屬性border-image-outset
    作用：擴大貼圖區所占的面積。
    語法：border-image-ouset: [<length> | <number>]{1,4}
    屬性值的順序和簡寫時語法擴展的規則與屬性border-image-width一致(top,right,bottom,left)，而其含義為將貼圖區各邊(top/right/bottom/left)向外擴展多大距離。
    <length>:設置距離各邊的絕對距離，負數無效。
    <number>:以對應的border-width為參考系，設置距離各邊的距離。默認值為0

注意
?通過border-image-outset擴大貼圖區的面積時，若border-image-width采用作屬性值，則同時擴大除middle區域外其他區域的尺寸；當border-image-width采用其他作屬性值時，只會看到圖片邊框向外移動而已。

合成的法則

?經過上述兩步"圖片切片"和"貼圖區切片"后，是時候將兩者糅合在一起了。具體邏輯如下：

  1. 初次調整圖片切片尺寸
    1.1. 將素材圖片各切片移至貼圖區中對應的區域；
    1.2. top/bottom圖片切片的高度縮放至于對應的貼圖區域的高度一致，并以相同的縮放比來調整圖片切片的寬度;
    1.3. left/right圖片切片的寬度縮放至于對應的貼圖區域的寬度一致，并以相同的縮放比來調整圖片切片的高度;
    1.4. top-left/right和bottom-left/right圖片切片的寬度和高度則各自縮放至于對應的貼圖區域一致即可
  2. 深度調整圖片切片尺寸
    2.1. 根據border-image-repeat屬性值對切片尺寸進行調整。
  3. 定位切片
    3.1. 當border-image-repeat屬性值為repeat時，切片位于對應貼圖區域的中央位置，否則則緊貼對應貼圖區域的左邊框。
  4. 3秒の合體:)，即根據border-image-repeat屬性值對切片進行復制、拉伸等平鋪操作，然后將貼圖區與目標元素所在的圖層進行合成即可！

?合成過程中有兩點是至關重要的：

  1. "初次調整圖片切片尺寸"是基礎，而且要注意的是，是以相同的縮放比來調整圖片，而不是直接讓圖片切片的尺寸與對應的貼圖區域尺寸一致；
  2. "深度調整圖片切片尺寸"、"定位切片"和平鋪方式均與border-image-repeat相關。

border-image-repeat

?語法：border-image-repeat: [stretch | repeat | round | space]{1,2}
?第一個屬性值為水平方向的平鋪方式，第二個屬性值為垂直方向的平鋪方式。
?stretch:拉伸圖片切片，默認值。
?repeat:復制平鋪圖片切片(不保證每幅圖片切片副本恰好能完整顯示)。
?round:根據貼圖區域尺寸調整圖片切片尺寸，然后復制平鋪圖片切片，從而保證每幅圖片切片副本恰好能完整顯示。
?space:復制平鋪圖片切片，并通過調整圖片切片副本間的空白，從而保證每幅圖片切片副本恰好能完整顯示。(效果和flexbox中content-align設置為space-round差不多)

素材圖片原尺寸：
347002-20160430231906863-648888788.png
最終效果：
347002-20160430231727800-188898816.png
大家可以看到最終效果里面4個角落的切片均縮小了，而left和right則是拉伸，top和bottom則是復制平鋪。

一鋪搞定&一鋪清袋

?粵語的"一鋪搞定"其實就是一次完成全部工作的意思，上面關于border-image的屬性，要是每次都逐個設置那要敲多少次鍵盤啊。。。其實我們可以通過border-image屬性一次搞定。
?語法：border-image: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>

?粵語的"一鋪清袋"其實就是把之前的成果一次性歸零。當我們辛辛苦苦設置好border-image后，一個不小心又設置了border屬性，那么之前關于border-image的設置將全部失效。因此先設置border屬性，然后再設置border-image最為穩妥。

兼容性

347002-20160430231943503-1927743582.png

總結

?總算折騰出來了，累啊！！！起初以為花2個晚上就能理解好并記錄下來，誰知道理解就花了2晚，然后各種試驗。。。看來還是太高估了自己了:(不過不管如何，弄明白后還是覺得很爽的哦！
?尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5449717.html^_^肥仔John

感謝

CSS Backgrounds and Borders Module Level 3 4. Borders
《圖解CSS3核心技術與案例實戰》——第3章 CSS3邊框

轉載于:https://www.cnblogs.com/fsjohnhuang/p/5449717.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/255405.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/255405.shtml
英文地址，請注明出處：http://en.pswp.cn/news/255405.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

共享內存簡介和mmap 函數

共享內存簡介和mmap 函數

一、共享內存簡介 共享內存區是最快的IPC形式&#xff0c;這些進程間數據傳遞不再涉及到內核&#xff0c;換句話說是進程不再通過執行進入內核的系統調用來傳遞彼此的數據。 即每個進程地址空間都有一個共享存儲器的映射區&#xff0c;當這塊區域都映射到相同的真正的物理地址空…
閱讀更多...
【pyqt5學習】——QToolTip,QLabel控件，伙伴關系

【pyqt5學習】——QToolTip,QLabel控件，伙伴關系

目錄 0、學習資源 1、給控件設置提示信息——QToolTip 2、QLabel控件&#xff08;顯示圖像、設置超鏈接、信號綁定&#xff09; 3、QLabel伙伴關系 1&#xff09;代碼 2&#xff09;效果 3&#xff09;知識點addWidget 0、學習資源 PyQt5教程&#xff0c;來自網易云課堂…
閱讀更多...
Hello IT

Hello IT

從高中的計算機課開始學習如何按下開機鍵&#xff0c;如何上網&#xff0c;如何背誦五筆字根&#xff0c;再到大學中如何使用office,利用C編碼做算法&#xff0c;到現在IT中的偽一員&#xff0c;時間算起來也不短&#xff0c;然正在入門是在2010年8月杭州參加嵌入式培訓&#x…
閱讀更多...
ARM指令集2

ARM指令集2

ARM指令集2 ARM微處理器支持加載/存儲指令用于在寄存器和存儲器之間傳送數據&#xff0c;加載指令用于將存儲器中的數據傳送到寄存器&#xff0c;存儲指令則完成相反的操作。 LDR指令&#xff08;與MOV有區別&#xff0c;MOV只能操作通用寄存器&#xff09; LDR指令格式為&…
閱讀更多...
SylixOS中select原理及使用分析

SylixOS中select原理及使用分析

2019獨角獸企業重金招聘Python工程師標準>>> 1. select接口簡介 1.1 select接口使用用例 select是操作系統多路I/O復用技術實現的方式之一。 多路I/O復用技術大致使用場景為&#xff1a;構造一張感興趣的文件描述符列表&#xff0c;然后調用多路復用的IO接口&#x…
閱讀更多...
【pyqt5學習】——QLineEdit學習（回顯模式）

【pyqt5學習】——QLineEdit學習（回顯模式）

目錄 1、回顯模式 2、成果顯示 3、知識點 1&#xff09;FormLayout布局添加addRow方法 2&#xff09;在輸入框顯示灰色提示字體&#xff0c;輸入內容時消失setPlaceholderText 3&#xff09;設置回顯模式setEchoMode 4、完整代碼 1、回顯模式 QLineEdit控件的主要功能是輸…
閱讀更多...
有關機械手臂控制中的兩個重要輸入參數

有關機械手臂控制中的兩個重要輸入參數

1.在機械手臂中有兩個重要參數。一個是編碼器的值&#xff0c;另外一個是馬達的電流值。根據這兩個可以獲得機械手臂的運動學&#xff0c;動力學的一些數據。第一重要特征參數 是DH參數&#xff0c;另外一個就是每個軸的質心參數。
閱讀更多...
MySQL的權限分配

MySQL的權限分配

MySQL 賦予用戶權限命令的簡單格式可概括為&#xff1a;grant 權限 on 數據庫對象 to 用戶&#xff0c;如 GRANT PRIVILEGES ON datebase.* to user% IDENTIFIED by passwd;一、給表數據賦權 grant 普通數據用戶&#xff0c;查詢、插入、更新、刪除 數據庫中所有表數據的權利。…
閱讀更多...
用HttpURLConnection發送http請求

用HttpURLConnection發送http請求

//發送http請求try {//1.使用網址構造一個URL對象 URL url new URL(path);//2.獲取連接對象 HttpURLConnection conn (HttpURLConnection) url.openConnection();//3.設置一些屬性 //設置請求方式&#xff0c;注意大寫conn.setRequestMethod("GET");//設置請求超時…
閱讀更多...
【pyqt5學習】——QLineEdit控件輸入校驗器Validator、掩碼setInputMask限制輸入、textChanged信號

【pyqt5學習】——QLineEdit控件輸入校驗器Validator、掩碼setInputMask限制輸入、textChanged信號

目錄 1、輸入校驗器——限制輸入框輸入的內容 1&#xff09;校驗器類型——整數、浮點數、數字字母結合&#xff08;正則&#xff09; 2&#xff09;步驟 3&#xff09;結果 ?編輯 ?編輯 4&#xff09;完整代碼 2、利用掩碼進行輸入的限制 0&#xff09;掩碼對照表 1…
閱讀更多...
Call requires API level 3 (current min is 1)

Call requires API level 3 (current min is 1)

結果出現“Call requires API level 3 (current min is 1): 解決方法&#xff1a; 在工程上點擊右鍵 -> Android Tools -> Clear Lint Markers&#xff0c;即可。轉載于:https://www.cnblogs.com/qianyukun/p/5458331.html
閱讀更多...
Product文本格式說明

Product文本格式說明

使用txt進行產品信息的說明。 Product文本格式說明 //**************************************************** //產品信息 //固定標識符全部大寫&#xff0c;全部在等號&#xff08;&#xff09;前面 //****************************************************** PRODUCTTest //…
閱讀更多...
PyOpenCL圖像處理：Box模糊

PyOpenCL圖像處理：Box模糊

為什么80%的碼農都做不了架構師&#xff1f;>>> # -*- coding: utf-8 -*-from __future__ import absolute_import, print_function import numpy as np import pyopencl as cl import cv2 from PIL import Imagedef RoundUp(groupSize, globalSize): r globalSi…
閱讀更多...
【python bug修復】——Script file ‘D:\softwares_install\Anaconda3\envs\PartTimes\Scripts\pip-scrip

【python bug修復】——Script file ‘D:\softwares_install\Anaconda3\envs\PartTimes\Scripts\pip-scrip

目錄 1、問題描述 2、問題解決 1&#xff09;下載pip安裝腳本 2&#xff09; 運行安裝pip腳本 3&#xff09; 下載庫 1、問題描述 利用pip命令進行庫的安裝時&#xff0c;突然出現這個問題&#xff0c;之前使用還好好的 Script file D:\softwares_install\Anaconda3\envs\P…
閱讀更多...
項目中的那些事---下載pdf文件

項目中的那些事---下載pdf文件

最近做了一個下載pdf文檔的需求&#xff0c;本以為使用HTML5中<a>標簽的屬性download就能簡單搞定&#xff0c;不料IE竟然不支持這一簡單粗暴的H5新特性&#xff0c;而是直接在網頁中打開&#xff0c; 于是各種搜索之后得出以下結論&#xff1a;IE中下載文檔時&#xff0…
閱讀更多...
MySQL日志分類及性能分析你應該知道的知識

MySQL日志分類及性能分析你應該知道的知識

為什么80%的碼農都做不了架構師&#xff1f;>>> MySQL日志記錄了MySQL數據庫日常操作和錯誤信息&#xff0c;MySQL總共有四種類型的日志&#xff0c;通過分析這些日志可以查詢到MySQL的運行情況、用戶操作、錯誤信息等&#xff0c;可以為MySQL的管理和優化提供必要…
閱讀更多...
利用三個點（trsf）來實現各種規則圖形的實現

利用三個點（trsf）來實現各種規則圖形的實現

在Val3,是使用trsf(x,y,z,rx,ry,rz)來實現三維空間點的位置與方向。 其中第一點和第二點位置很重要&#xff0c;第三點是用來確定方向。根據這三個點先確定一個用戶坐標系。 在這個坐標系中&#xff0c;實現圓&#xff0c;三角形&#xff0c;矩形&#xff0c;腰圓&#xff0c;正…
閱讀更多...
android基礎組件----Button的使用

android基礎組件----Button的使用

按鈕由文本或圖標&#xff08;或文本和一個圖標&#xff09;組成&#xff0c;當用戶觸摸到它時&#xff0c;會發生一些動作。今天我們開始Button的學習。少年的愛情永遠不夠用&#xff0c;一杯酒足以了卻一件心事。 Button的簡要說明 根據你是否想要一個帶有文本的按鈕&#xf…
閱讀更多...
@Repository、@Service、@Controller 和 @Component

@Repository、@Service、@Controller 和 @Component

Repository 、Service 、 Controller 、Component 這四個Spring注解 ,用于把加了注解的 類 加入到Spring 容器中管理&#xff0c;節省了xml 的繁重的配置&#xff0c;盡管如此xml 同樣可以實現&#xff08;一般建議先搞懂xml&#xff09;。 Repository Repository注解便屬于最先…
閱讀更多...
【pyqt5學習】——QTextEdit控件學習：獲取文本、添加文本

【pyqt5學習】——QTextEdit控件學習：獲取文本、添加文本

目錄 1、QTextEdit控件介紹 2、QTextEdit控件添加文本、添加HTML格式 3、QTextEdit控件獲取文本、獲取HTML格式文本 4、案例 1&#xff09;完整代碼 2&#xff09;效果 1、QTextEdit控件介紹 QTextEdit控件是一個支持多行輸入的輸入框&#xff0c;支持HTML進行格式的設置 2…
閱讀更多...
最新文章

Copyright @ 2022~2023