HTML+CSS如何實現文本效果、漸變效果、邊框圖片效果

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

文本陰影

文本裁剪

文本描邊

文本填充

線性漸變


徑向漸變



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

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

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

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

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

這里設置的是邊框圖像的寬度，而不是邊框寬度。當你設置邊框寬度，你會發現，文本  會偏移。而邊框圖像的寬度不會擠壓文本。
//設置邊框的寬度border-width: 20px;

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

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

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

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

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

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

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

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

//平鋪填充，動態調整圖片大小直至鋪滿border-image-repeat: round;

//平鋪填充，動態調整圖片的間距直至鋪滿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 '>

//以上是手冊上摘錄的，轉換成實際格式如下： 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;

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