HTML+CSS如何實現(xiàn)文本效果、漸變效果、邊框圖片效果-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)HTML+CSS如何實現(xiàn)文本效果、漸變效果、邊框圖片效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10多年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都PVC花箱等企業(yè)，備受客戶贊揚。

文本陰影

文本裁剪

文本描邊

文本填充

線性漸變


徑向漸變



邊框圖片效果：
一．屬性解釋
CSS3 提供了一個新的屬性集合，用這幾個屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。
1.border-image-source  //引入背景圖片地址
2.border-image-slice   //切割引入背景圖片
3.border-image-width   //邊框圖片的寬度
4.border-image-repeat  //邊框背景圖片的排列方式
5.border-image-outset  //邊框背景向外擴(kuò)張
6.border-image  //上面五個屬性的簡寫方式

二．屬性解釋
要實現(xiàn)邊框背景，我們對圖片也有一定的要求，否則效果不能完全體現(xiàn)出來。圖片可以  通過九宮格的切分來了解它。我們使用 W3C 官網(wǎng)上教學(xué)的圖片來講解一下。

如上圖所示，九宮格并不一定要求每一個格子大小都相同。當(dāng)然，如果相同的話，制作  邊框背景就相對容易一點。比如如下這張圖片：

首先，用 Photoshop 軟件分析一下這個標(biāo)準(zhǔn)九宮格的總體大小和每個格子的大小。最終得出圖片總大小為 81px 正方形，四個角的大小為 27px 的正方形，其余五個角也是 27px。
那么，第一步：先創(chuàng)建一個盒子區(qū)域，大小為 400x400 的矩形。然后設(shè)置引入邊框圖
像。
//引入邊框圖像
border-image-source: url(border.png);

單單只有這句話，webkit 引擎下的瀏覽器會在盒子區(qū)塊的四個角看到一丁點圖像的影子。而其他瀏覽器什么都看不到。這是由于沒有設(shè)置邊框背景圖像的寬度導(dǎo)致的。
//設(shè)置邊框圖像寬度，上右下左，可以設(shè)置四個值border-image-width: 81px;

這里設(shè)置的是邊框圖像的寬度，而不是邊框?qū)挾?。?dāng)你設(shè)置邊框?qū)挾?，你會發(fā)現(xiàn)，文本  會偏移。而邊框圖像的寬度不會擠壓文本。
//設(shè)置邊框的寬度border-width: 20px;

以上設(shè)置完畢后，支持邊框背景圖片的瀏覽器會在四個角落鋪上這張圖片的完×××式。  這個時候需要通過引入切割屬性來配置背景圖片的顯示方式。
//首先，邊框圖像寬度設(shè)置為 27px 和一個單格寬高一致
border-image-width: 27px;
//設(shè)置切割屬性的大小border-image-slice: 27;

這里的 27 不需要設(shè)置 px 像素，因為它默認(rèn)就是像素。設(shè)置 27 之后，我們會發(fā)現(xiàn)邊框的四個角正好是橘紅色的四個角。那么你可以逐步放大或逐步放下這個值，來體驗一下它的  變化。
//從 27 逐步放大到 81，四個角都慢慢縮小，各自顯示一個完整的圖像border-image-slice: 81;

//從 27 逐步縮小到 0，發(fā)現(xiàn)四個角都慢慢變大，配合 fill 整體顯示一個完整圖像
border-image-slice: 0 fill;

上面只是單獨設(shè)置了一個像素表示四個邊切割的大小，你也可以設(shè)置百分比、浮點值或  者分別設(shè)置四個變的大小。
//33.5%差不多 27
border-image-slice: 33.5%;
//上下設(shè)置 27，左右設(shè)置 0
border-image-slice: 27 0;

如果想讓邊框背景向外擴(kuò)張，那么可以進(jìn)行擴(kuò)張設(shè)置。
//向外擴(kuò)張 20px，也可以是浮點值，比如 2.2 border-image-outset: 20px;

四個角設(shè)定好之后，我們要設(shè)定四個變的顯示排列方式。使用 border-image-repeat
屬性，有四個值提供使用，分別如下表：

//拉伸方式填充，當(dāng)然，通過上右下左設(shè)置四個邊均可border-image-repeat: stretch;

//平鋪填充，超過則被截斷border-image-repeat: repeat;

//平鋪填充，動態(tài)調(diào)整圖片大小直至鋪滿border-image-repeat: round;

//平鋪填充，動態(tài)調(diào)整圖片的間距直至鋪滿border-image-repeat: space;

//另一個按鈕的小例子div {
width: 400px; height: 40px;
border-image-source: url(button.png); border-image-width: 10px;
border-image-slice: 10 fill; border-image-repeat: stretch;
}
三．簡寫和版本
//border-image 簡寫格式很簡單，具體如下：
border-image：<' border-image-source '> || <' border-image-slice '> [ /
<' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

//以上是手冊上摘錄的，轉(zhuǎn)換成實際格式如下： border-image: url(border.png) 27/27px round;

對于支持的瀏覽器及版本如下表：

//兼容加上前綴
-webkit-border-image: url(border.png) 27/27px round;
-moz-border-image: url(border.png) 27/27px round;
-o-border-image: url(border.png) 27/27px round; border-image: url(border.png) 27/27px round;

感謝各位的閱讀！關(guān)于“HTML+CSS如何實現(xiàn)文本效果、漸變效果、邊框圖片效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：HTML+CSS如何實現(xiàn)文本效果、漸變效果、邊框圖片效果-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://muchs.cn/article14/eegde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、App設(shè)計、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)