整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一篇文章中，小海前端（頭條號）為小伙伴們介紹了CSS3中新增的border-image屬性，該屬性主要用于為容器的邊框添加圖片。本篇文章，繼續(xù)為大家講解該屬性的用法和CSS3中對該屬性的一些細節(jié)要求。
尚未閱讀上一篇文章的小伙伴請先閱讀上一篇文章，上一篇文章講解了border-image屬性及其派生屬性的基礎(chǔ)用法。
承接文章：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一種新穎的用法
技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。
該組屬性的兼容性暫時還不是特別好，建議大家使用火狐瀏覽器（Firefox）來嘗試該屬性的各個效果。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學到對你有用的知識。
本篇文章涉及到的CSS3屬性問題：
border-image-slice屬性的使用細節(jié)
border-outset屬性的用法
border-image-width屬性和border-width屬性的區(qū)別
border-image屬性和border屬性的沖突性
各個瀏覽器內(nèi)核的兼容性
一、border-image-slice屬性的使用細節(jié)：
上一篇文章中講到，border-image-slice是用來設(shè)置邊框圖片的切片屬性的。該屬性的取值為一個不帶單位的數(shù)值，默認單位為像素，但是不用書寫px。該屬性設(shè)置的數(shù)值可以將邊框圖片劃分為9個區(qū)域，并貼到邊框的9個不同位置。
這里還以上一篇文章中寬度和高度均為90像素的圖片為例，該圖片存放在一個名為images的文件夾中，圖片的文件名為ball.jpg，圖片中每個圓形的直徑均為30像素。
素材圖 ball.jpg
對于該屬性，CSS3對于它的使用方法還有以下幾個細節(jié)要求：
當切片的上下偏移之和大于等于圖像的高度，且左右偏移之和大于等于圖像的寬度。則容器只有四個角可以獲得邊框圖片的切片，而容器的邊無法獲得任何圖片。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代碼指出，上切片尺寸為60像素，右切片尺寸為70像素，下切片尺寸為50像素，左切片尺寸為30像素。上下切片的偏移之和為110像素，左右切片的偏移之和為100像素，這兩個值均超過了圖片90像素的寬高尺寸。因此只有容器的四個角可以得到邊框圖像。最終效果如下圖所示：
實體效果圖
當切片的上下偏移量都大于等于圖像的高度，且左右偏移量都大于等于圖像的寬度。則容器的四個角可以獲得完整的邊框圖像。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代碼指出，上切片尺寸為90像素，右切片尺寸為100像素，下切片尺寸為120像素，左切片尺寸為130像素。每一個方向的切片偏移量均大于等于圖片90像素的寬度和高度值。因此容器的四個角可以獲得完整的邊框圖像。同樣，邊依然無法得到任何切片圖像。
最終效果如下圖所示：
實體效果圖
border-image-slice屬性還有一個可以放在切片數(shù)量后面的取值。當具有該取值并設(shè)置為“fill”時，邊框圖片中5號圓形就會顯示在容器的內(nèi)部。如果沒有該取值，邊框圖片中5號圓形就不會顯示在容器內(nèi)部。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30 fill/30px round
最終效果如下圖所示：
實體效果圖
二、border-outset屬性的用法：
該屬性用來對邊框圖像實現(xiàn)向外擴張的效果。該屬性的取值為帶有單位的數(shù)值。同時該屬性也是可以結(jié)合border-image屬性單獨使用的。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代碼會讓邊框圖像在顯示的同時向外擴張30像素。請小伙伴們自行操作并嘗試。
三、border-image-width屬性和border-width屬性的區(qū)別：
border-width屬性可以單獨使用，適用于設(shè)置具有顏色的邊框?qū)挾取?/p>
border-image-width屬性不可以單獨使用，必須在border-image屬性取值內(nèi)部固定的位置處使用。該屬性主要用于設(shè)置具有圖像的邊框?qū)挾取?/p>
這兩個屬性是可以同時使用的。
當容器內(nèi)部具備文本內(nèi)容時，我們發(fā)現(xiàn)，文本內(nèi)容出現(xiàn)在了邊框圖片的位置處。為了方便小伙伴們觀察，我把文本內(nèi)容調(diào)整成了黃色。如下圖的左側(cè)部分。
實體效果圖
此時調(diào)整border-width屬性，為了讓邊框?qū)挾壬В€需要設(shè)置邊框樣式border-style。為了不讓容器的大小發(fā)生變化，添加box-sizing屬性。為了便于查看，我把文本內(nèi)容調(diào)整成了紅色。如上圖右側(cè)部分。
CSS代碼如下所示：
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image屬性和border屬性的沖突性：
CSS3規(guī)定，帶有顏色的邊框和邊框圖片不得同時存在，并且當border-image屬性和border屬性同時存在時，border-image是不起作用的。
CSS代碼如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代碼執(zhí)行后，容器會帶有10像素的邊框，而不帶有邊框圖片。小伙伴們可以自行嘗試。
五、各個瀏覽器內(nèi)核的兼容性：
CSS3的屬性中還有許多都是瀏覽器不能完全兼容的，有的屬性兼容部分瀏覽器，有的屬性被瀏覽器部分兼容。那么，要對所有的瀏覽器都得到相同的外觀，應(yīng)該如何處理呢？
可以采用為CSS屬性的兼容性前綴來解決這個問題。
-ms-，適用于具有Trident內(nèi)核的IE系列瀏覽器。
-webkit-，適用于具有webkit內(nèi)核的瀏覽器，例如Safari瀏覽器、360安全瀏覽器等。
-moz-，適用于Firefox瀏覽器。
-o-，適用于Opera瀏覽器。
因此，border-image屬性要實現(xiàn)瀏覽器全兼容可以使用下列代碼：
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不過通過實際操作，我發(fā)現(xiàn)border-image屬性即使加上了瀏覽器兼容性前綴，也不能達到滿意的效果。CSS3中還有許多屬性都不能達到最滿意的兼容性，我們只能等待CSS3完備的計劃出臺，并盡快得到大部分瀏覽器廠商的支持和認可。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學者跟著學下去，我們共同將前端開發(fā)的路努力堅持的走下去。
下一篇文章中，小海前端（頭條號）會為小伙伴們講解CSS3中實現(xiàn)多列布局的屬性。這組屬性解決了在CSS2時必須要對容器進行浮動才能在一行內(nèi)顯示多列的問題。希望小伙伴們不要錯誤。
2024年選擇適合項目的CSS框架至關(guān)重要。這將為構(gòu)建新的用戶界面（UI）組件所需的總體努力定下基調(diào)。目前，最重要的是更快地發(fā)布新功能，以保持客戶的滿意度。因此，你需要一個易于使用的CSS框架，它能夠提供現(xiàn)成的UI元素。
下面，我們來看看2024年值得嘗試的最佳CSS框架。
在今天的數(shù)字時代，網(wǎng)頁設(shè)計和開發(fā)已經(jīng)成為創(chuàng)造令人印象深刻在線體驗的關(guān)鍵。為了滿足這一需求，Bootstrap 應(yīng)運而生，它是一款以移動為先的 CSS 框架，不僅能幫助你構(gòu)建外觀優(yōu)雅的響應(yīng)式網(wǎng)頁界面，還大大簡化了開發(fā)過程。
Bootstrap 的核心在于其強大的柵格系統(tǒng)，這一系統(tǒng)使得開發(fā)者可以為各種屏幕尺寸創(chuàng)建靈活的布局。更重要的是，Bootstrap 提供了大量現(xiàn)成的組件，比如導(dǎo)航欄、卡片和模態(tài)框，這些都讓開發(fā)變得更加迅速和高效。
Bootstrap 的獨特之處
如何將 Bootstrap 與現(xiàn)代框架結(jié)合使用
如果你在使用 React 開發(fā)項目，可以輕松地將 React Bootstrap 庫安裝到你的項目中，通過這種方式，你可以在保持 React 的組件化開發(fā)模式的同時，享受 Bootstrap 提供的樣式和組件優(yōu)勢。
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './bootstrap.css';
export function Bootstrap() {
return (
<div className="button">
{['Primary', 'success', 'danger'].map((variant) => (
<DropdownButton
as={ButtonGroup}
key={variant}
id={dropdown-variants-${variant}}
variant={variant.toLowerCase()}
title={variant}
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
))}
<br />
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}Tailwind CSS 以其獨樹一幟的“工具優(yōu)先”設(shè)計理念，在前端開發(fā)社區(qū)中引起了廣泛關(guān)注。它與傳統(tǒng)的 CSS 框架不同，不提供預(yù)設(shè)樣式的組件，而是通過提供大量的低級實用類（utility classes），讓開發(fā)者能夠構(gòu)建出完全定制的設(shè)計。這種方法提供了前所未有的靈活性和可擴展性，使得開發(fā)者可以精準控制網(wǎng)頁的每一個細節(jié)。
Tailwind CSS 的獨特特點
如何集成 Tailwind CSS
集成 Tailwind CSS 到項目中并非一蹴而就，首先需要設(shè)置 Tailwind 編譯器。通過在項目的配置文件中指定要處理的內(nèi)容和自定義主題，然后通過插件來擴展功能，你可以開始使用 Tailwind 提供的實用類來編寫 CSS。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}以下是相關(guān)的使用示例
export function Tailwind() {
const ContactTextArea = ({
row,
placeholder,
name,
defaultValue,
}: {
row: number;
placeholder: string;
name: string;
defaultValue: string;
}) => {
return (
<>
<div className="mb-6">
<textarea
rows={row}
placeholder={placeholder}
name={name}
className="w-full resize-none rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
defaultValue={defaultValue}
/>
</div>
</>
);
};
const ContactInputBox = ({
type,
placeholder,
name,
}: {
type: string;
placeholder: string;
name: string;
}) => {
return (
<>
<div className="mb-6">
<input
type={type}
placeholder={placeholder}
name={name}
className="w-full rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
/>
</div>
</>
);
};
return (
<section className="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]">
<div className="w-full px-4 lg:w-1/2 xl:w-5/12">
<div className="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12">
<form>
<ContactInputBox type="text" name="name" placeholder="Your Name" />
<ContactInputBox
type="text"
name="email"
placeholder="Your Email"
/>
<ContactInputBox
type="text"
name="phone"
placeholder="Your Phone"
/>
<ContactTextArea
row={6}
placeholder="Your Message"
name="details"
defaultValue=""
/>
<div>
<button
type="submit"
className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"
Send Message
</button>
</div>
</form>
<div />
</div>
</div>
</section>
);
}Foundation 是一款開源的、響應(yīng)式的前端框架，它極大地簡化了創(chuàng)建在任何設(shè)備上都能完美運行的響應(yīng)式網(wǎng)站、應(yīng)用程序和電子郵件的過程。由于其出色的靈活性和易用性，F(xiàn)oundation 已被包括 Facebook、eBay、Mozilla、Adobe 乃至 Disney 在內(nèi)的許多公司采用于他們的項目中。
Foundation 提供了一個強大而靈活的響應(yīng)式柵格系統(tǒng)，并且包括了許多方便的選項、模態(tài)框（modals）、排版（typography）、導(dǎo)航組件以及表單元素，設(shè)計師可以快速將這些元素集成到他們的產(chǎn)品中。此外，F(xiàn)oundation 的模塊化架構(gòu)意味著你可以根據(jù)需要，使用它的部分或全部功能。
Foundation 的獨特特性
如何在項目中集成 Foundation
通過如下示例代碼，可以看到如何在 React 項目中使用 Foundation：
import { Menu, MenuItem } from 'react-foundation';
export function Foundation() {
return (
<Menu style={{ marginLeft: '34px' }}>
<MenuItem>
<a href="/">Home</a>
</MenuItem>
<MenuItem>
<a href="/">Blog</a>
</MenuItem>
<MenuItem>
<a href="/">About</a>
</MenuItem>
<MenuItem>
<a href="/">Contact</a>
</MenuItem>
</Menu>
);
}
這個例子展示了如何使用 Foundation 的 Menu 和 MenuItem 組件來創(chuàng)建一個簡單的導(dǎo)航菜單。這種集成方式使得在保持 React 組件化開發(fā)模式的同時，還能享受 Foundation 提供的樣式和組件優(yōu)勢。
Bulma 是一個輕量級的 CSS 框架，以其簡單性、響應(yīng)性和定制選項著稱。它與其他 UI 框架的不同之處在于，Bulma 是基于 Flexbox 構(gòu)建的，F(xiàn)lexbox 是一種 CSS 布局模型，能夠根據(jù)容器的寬度調(diào)整頁面元素的寬度，這使得創(chuàng)建網(wǎng)格等任務(wù)變得非常簡單，并且是框架輕量化的原因之一。
Bulma 的主要特點
如何在項目中集成 Bulma
將 Bulma 集成到項目中相當簡單，只需導(dǎo)入 Bulma 的 CSS 文件即可開始使用它提供的各種樣式和組件。以下是一個使用 Bulma 創(chuàng)建分頁導(dǎo)航的示例：
import 'bulma/css/bulma.min.css';
export function Bulma() {
return (
<div>
<nav className="pagination" role="navigation" aria-label="pagination">
<a href="/" className="pagination-previous">
Previous
</a>
<a href="/" className="pagination-next">
Next Page
</a>
<ul className="pagination-list">
<li>
<a href="/" className="pagination-link" aria-label="Goto page 1">
1
</a>
</li>
<li>
<span className="pagination-ellipsis">…</span>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 45">
45
</a>
</li>
<li>
<a
href="/"
className="pagination-link is-current"
aria-label="Page 46"
aria-current="page"
46
</a>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 47">
47
</a>
</li>
<li>
<span className="pagination-ellipsis">…</span>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 86">
86
</a>
</li>
</ul>
</nav>
</div>
);
}
這個例子展示了如何利用 Bulma 的分頁組件來創(chuàng)建一個簡潔美觀的分頁導(dǎo)航。通過使用 Bulma，開發(fā)者可以節(jié)省大量的時間來設(shè)計和編寫 CSS，專注于實現(xiàn)更好的用戶體驗和界面設(shè)計。
UIKit 是一個開源的框架，專門用于構(gòu)建 Web 應(yīng)用程序的用戶界面。它與其他 UI 框架在結(jié)構(gòu)和設(shè)計哲學上有所不同。不同于其他遵循傳統(tǒng) BEM 方法論的框架，UIKit 采用了基于組件的結(jié)構(gòu)。這種方式為組件的靈活性和可重用性提供了更大的空間，可以顯著減少構(gòu)建復(fù)雜用戶界面所需的代碼量。
UIKit 的主要特性
如何在項目中集成 UIKit
將 UIKit 集成到項目中非常直接，僅需導(dǎo)入 UIKit 的 CSS 文件即可開始使用其提供的樣式和組件。以下是一個使用 UIKit 創(chuàng)建按鈕的示例：
import 'uikit/dist/css/uikit.min.css';
export function Uikit() {
return (
<div className="uk-flex uk-flex-center uk-margin-top">
<button
type="button"
className="uk-button uk-button-default uk-margin-left"
onClick={() => alert('Cancel clicked!')}
>
Cancel
</button>
</div>
);
}
這個例子演示了如何利用 UIKit 的按鈕（Button）組件來創(chuàng)建一個簡單的按鈕，并使用 Flexbox 實現(xiàn)居中布局。通過 UIKit，開發(fā)者可以享受到高度靈活和易用的界面構(gòu)建體驗，同時也能保持代碼的整潔和模塊化。
選擇合適的 CSS 框架對于項目的成功至關(guān)重要。每個框架都有其獨特的特點、優(yōu)勢和可能的限制，因此了解如何根據(jù)項目的具體需求挑選合適的框架是一項重要的技能。除了我們討論的 Bootstrap、Tailwind CSS、Foundation、Bulma 和 UIKit 外，市面上還有許多其他的 CSS 框架，每個都有可能成為你項目的理想選擇。
創(chuàng)建概念驗證
創(chuàng)建概念驗證（Proof-of-Concept，PoC）是評估 CSS 框架是否適合你項目的一個極好方法。通過這種方式，你可以實際操作并體驗每個框架的學習曲線、靈活性、易用性以及它們?nèi)绾芜m應(yīng)你的項目需求。以下是一些建議，幫助你通過創(chuàng)建概念驗證來選擇正確的 CSS 框架：
通過這種綜合評估方法，你可以更全面地理解每個框架如何適應(yīng)你的項目需求，從而做出明智的選擇。記住，最適合項目的框架不一定是最流行或最新的，而是最能滿足你項目特定需求的那一個。分享你的概念驗證經(jīng)驗和框架選擇理由，不僅能幫助團隊成員理解決策過程，也能為面臨相似選擇的其他開發(fā)者提供參考。
構(gòu)建現(xiàn)代網(wǎng)頁時，圖片是不可或缺的元素之一。它們能夠增強視覺吸引力，幫助傳達信息，并提升用戶體驗。然而，如果圖片沒有得到適當?shù)膬?yōu)化，它們可能會顯著拖慢網(wǎng)站的加載速度，影響用戶體驗和搜索引擎優(yōu)化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優(yōu)化這些格式的策略和示例。
根據(jù)圖片內(nèi)容和用途選擇最合適的格式。例如，對于網(wǎng)頁上的照片，JPEG可能是最佳選擇，因為它在保持相對較小的文件大小的同時提供了良好的圖像質(zhì)量。對于需要透明背景的圖標，PNG可能更合適。
使用工具或服務(wù)壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲為Web所用格式”功能來減小JPEG文件的大小。
根據(jù)需要在網(wǎng)頁中顯示的大小調(diào)整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因為這會導(dǎo)致不必要的加載時間。
通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。
對于非視口內(nèi)的圖片，可以使用延遲加載（lazy loading）技術(shù)。這樣，只有當用戶滾動到圖片位置時，圖片才會加載。
使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來分發(fā)圖片，可以減少加載時間，因為圖片會從離用戶最近的服務(wù)器加載。
假設(shè)你有一個高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網(wǎng)頁上以800x600像素的尺寸展示，那么：
優(yōu)化后的圖片可能只有100KB左右，大大減少了加載時間。
如果你有一個圖標，需要在網(wǎng)頁上以多種尺寸展示，并且需要透明背景：
圖片優(yōu)化對于提高網(wǎng)頁加載速度至關(guān)重要。通過選擇合適的圖片格式，壓縮文件大小，調(diào)整尺寸，使用響應(yīng)式圖片技術(shù)，實現(xiàn)延遲加載，以及利用CDN，可以確保圖片在不犧牲質(zhì)量的情況下快速加載。這不僅能提升用戶體驗，還能對SEO產(chǎn)生積極影響。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
