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

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、南平網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為南平等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

文本陰影

文本裁剪

文本描邊

文本填充

線性漸變


徑向漸變



邊框圖片效果：
一．屬性解釋
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  //上面五個屬性的簡寫方式

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

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

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

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

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

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

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

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

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

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

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

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

//平鋪填充，超過則被截?cái)郻order-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)換成實(shí)際格式如下： 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如何實(shí)現(xiàn)文本效果、漸變效果、邊框圖片效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！