国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細

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

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

CSS3漸變代碼

Direction方向或者角度
to left:設(shè)置的線性漸變是從右到左的,也是等于: 270deg
to right:設(shè)置的線性漸變是從左到右的,也是等于: 90deg
to top:設(shè)置的線性漸變是從下到上的,也是等于: 0deg
to bottom:設(shè)置的線性漸變是從上到下的,也是等于: 180deg。這是默認值,相當(dāng)于不設(shè)置。
 
例如線下漸變分別如下:

CSS3漸變代碼2

CSS3漸變代碼3

CSS3漸變效果

重復(fù)的線性漸變?nèi)缦拢?br /> background-image: repeating-linear-gradient(#34b168, #8fc320 10%, #346bae 20%);

CSS3漸變效果2

徑向漸變?nèi)缦拢?br />
CSS3漸變代碼6

shape形狀,可以設(shè)置為是 circle 或 ellipse,默認是ellipse。
size是漸變的大小,可以設(shè)置closest-side、farthest-side、closest-corner和farthest-corner。
例如:

HTML代碼

CSS代碼

展示效果

重復(fù)的徑向漸變?nèi)缦拢?br /> background-image: repeating-radial-gradient(#34b168, #8fc320 10%, #346bae 20%);  
效果
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/5829.html
陇南市| 梅河口市| 胶南市| 彰化县| 福贡县| 沅陵县| 云林县| 汾阳市| 前郭尔| 珠海市| 辉县市| 阿尔山市| 遵义市| 桦南县| 扶绥县| 康定县| 扶绥县| 合川市| 光山县| 阿拉善左旗| 怀安县| 宣威市| 康定县| 开封县| 合阳县| 井冈山市| 手游| 茂名市| 澳门| 江源县| 尼勒克县| 靖西县| 靖远县| 红安县| 庆城县| 左权县| 和龙市| 云阳县| 渝中区| 且末县| 贵州省|