网站搜索引擎提交入口,那些做兼职的小网站,网站建设行业市场规模,百度app智能小程序渐变#xff1a;通过渐变可以设置一些复杂的背景颜色#xff0c;可以从实现一个颜色向其他颜色过渡的效果
渐变是图片#xff0c;通过 background-image设置
一、渐变色 可选值 1#xff1a; linear-gradient [ɡreidiənt]#xff0c;线性渐变#xff0c;颜色沿着一条…渐变通过渐变可以设置一些复杂的背景颜色可以从实现一个颜色向其他颜色过渡的效果
渐变是图片通过 background-image设置
一、渐变色 可选值 1 linear-gradient [ɡreidiənt]线性渐变颜色沿着一条直线发生变化 语法linear-gradient(方位,颜色1,颜色2) 参数1:表示方位可选值不写默认是to bottom (1)to leftto right, to bottom, to top (2)xxxdeg 表示角度度数会更灵活 (3)turn 表示圈 .5turn 参数2:颜色1 参数3:颜色2 注意可以写多个颜色默认情况下颜色是均分占比的也可以手动的指定渐变的分布情况例如background-image:linear-gradient(red 50px,yellow) 颜色后直接跟占比 2:repeating-linear-gradient() 可以平铺的线性渐变 background-image: repeating-linear-gradient(yellow 0px, red 50px); 参数跟linear-gradient是一样的 参数2-参数1中间部分是渐变的颜色拿总高度/差值就是颜色重复出现的次数
二、放射渐变 —经向渐变放射性的效果 radial-gradient() [reidiəl] [ɡreidiənt]
语法background-image: radial-gradient(); 默认情况下圆心是根据元素的形状来计算的 正方形--圆形 长方形--椭圆型 参数1:圆心的形状 1circle圆形ellipse椭圆 2设置的大小 at 位置像素1 像素2 at 0px 0px 参数2:颜色1 参数3:颜色2 ······
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box1 {width: 200px;height: 200px;/* background-image:linear-gradient( red,yellow) ; */background-image: repeating-linear-gradient(yellow 0px, red 100px);background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);}/style/headbodydiv classbox1/div/body
/html
