标签：skyblue -- 背景 渐变 100px gradient background image

 

背景颜色的渐变

 

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过度的效果 渐变是图片，需要通过background-image来设置      linear-gradient() 线性渐变：颜色沿着一条直线发生变化   例如：  linear-gradient(orange,skyblue);    orange在头，skyblue在结尾，中间是过渡区域  默认从上往下进行渐变

 

 

  background-image: linear-gradient(to right, orange,skyblue);  从左到右渐变  

 

 

 -线性渐变的开头，我们可以指定一个渐变方向             to left          向左渐变             to right       向右渐变             to top         向上渐变             to bottom   向下渐变             xxxdeg   deg表示度数  向xx度渐变             turn 表示圈                    向xx圈渐变   渐变可以同时指定多个颜色，多个颜色默认情况下平均分配  background-image: linear-gradient(to right, orange ,skyblue ,pink);

也可以手动对颜色指定范围进行调整

 

  background-image: linear-gradient(to right, orange 100px,skyblue 150px );  从左到右进行渐变 0-100px为orange色，150px-200px为skyblue色  

 

实现渐变效果的重复  repeating-linear-gradient

 

 background-image: repeating-linear-gradient(skyblue 50px,pink 100px); 100-50=50px  所以渐变范围为50px 从0-200px逐步平铺展示（0-50 50-100 100-150 150-200） 

 

 

 

radial-gradient() 径向渐变（太阳的效果）

 

background-image: radial-gradient(skyblue,yellow);  

 

 

 默认情况下 径向渐变圆心的形状根据元素的形状来计算             元素为正方形对应的是圆形             长方形对应的是椭圆形             我们也可以手动指定径向渐变的大小  border-radius: 50%; background-image: radial-gradient(100px 100px,skyblue,yellow);   也可以指定渐变的位置 background-image: radial-gradient(100px 100px at 80px 80px, skyblue,yellow);

 

 -语法：                radial-gradient(大小 at 位置， 颜色1 位置1，颜色2 位置2)                大小：circle  圆形                     ellipse 椭圆形                     closest-side 近边                     closest-corner 近角                     farthes-side 远边                     farthes-corner 远角                 位置： top right left bottom center

 

标签：skyblue,--,背景,渐变,100px,gradient,background,image
来源： https://www.cnblogs.com/yqPhare/p/15490043.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。