中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站前端制作之css3的漸變效果

2023-03-04    分類: 網(wǎng)站建設

漸變設計在背景的使用,可以體現(xiàn)出良好的視覺吸引力,幫助用戶理解設計所表達的內(nèi)容。在文本字體的中使用可以營造出一個吸引人的焦點,快速吸引注意力。漸變使用在圖片上的時候就可以使圖片更加出彩,從而導致整個網(wǎng)站在視覺上也加分不少。漸變的使用不僅可以引導瀏覽者的視線還可以令人記憶較為深刻。所以在網(wǎng)站的制作中也不可以避免的應用到。
css3能實現(xiàn)的漸變效果有線性漸變、徑向漸變、重復的線性漸變、重復的徑向漸變,在網(wǎng)站制作的過程中,經(jīng)常需要用到,有的是作用做背景圖上,有的作用在字體上,有的直接作用在圖片上,當需要作用在背景和字體上時,就需要用到css 3做線性的漸變或者徑向的漸變,具體的需要根據(jù)設計而定。

CSS3漸變代碼

linear-gradient()
Direction方向或者角度
to left:設置的線性漸變是從右到左的,也是等于: 270deg
to right:設置的線性漸變是從左到右的,也是等于: 90deg
to top:設置的線性漸變是從下到上的,也是等于: 0deg
to bottom:設置的線性漸變是從上到下的,也是等于: 180deg。這是默認值,相當于不設置。
CSS3漸變代碼2
CSS3漸變代碼3
CSS3漸變效果
例如線下漸變分別如下:
重復的線性漸變?nèi)缦拢?br />CSS3漸變效果2
background-image: repeating-linear-gradient(#34b168, #8fc32010%, #346bae 20%);
CSS3漸變代碼6
徑向漸變?nèi)缦拢?br />shape形狀,可以設置為是 circle 或 ellipse,默認是ellipse。
size是漸變的大小,可以設置closest-side、farthest-side、closest-corner和farthest-corner。
HTML代碼
CSS代碼
展示效果
例如:
重復的徑向漸變?nèi)缦拢?br />效果

名稱欄目:網(wǎng)站前端制作之css3的漸變效果
文章路徑:http://m.rwnh.cn/news3/241453.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站用戶體驗、網(wǎng)站設計公司、企業(yè)網(wǎng)站制作網(wǎng)站改版、微信小程序

廣告

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

成都網(wǎng)站建設公司
湘西| 德钦县| 元朗区| 永安市| 柘荣县| 库尔勒市| 和龙市| 曲阳县| 舟曲县| 洪雅县| 霍林郭勒市| 蒙自县| 定日县| 上杭县| 禄劝| 玉屏| 长海县| 沭阳县| 宁化县| 阳原县| 大同市| 光泽县| 合江县| 贵德县| 隆德县| 固阳县| 鄂温| 陵川县| 吉首市| 隆化县| 瑞昌市| 呼伦贝尔市| 南漳县| 齐齐哈尔市| 文安县| 巴林左旗| 报价| 谢通门县| 延边| 松原市| 平乐县|