菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

css3-背景渐变

原创
05/13 14:22
阅读数 244

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课

线性渐变
linear-gradient(direction, color-stop1, color-stop2, ...);
带兼容写法
这两个是效果一样的
background: linear-gradient(to bottom, #51098A 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #51098A 0%, #ffffff 100%);  
添加角度
linear-gradient(angle, color-stop1, color-stop2);
定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)

file
https://www.runoob.com/css3/css3-gradients.html (菜鸟教程)

重复渐变

background: repeating-linear-gradient(#51098A, #ffffff 10%, #51098A 20%);
效果:
file

径向渐变
radial-gradient(shape size at position, start-color, ..., last-color);
一个径向渐变,必须至少定义两种颜色节点。可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认中心是 center(中心点),默认形状是 ellipse(椭圆形),默认渐变大小是 farthest-corner(到最远的角落)。

形状:

radial-gradient(circle, red, yellow, green);
它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse   

重复渐变

repeating-radial-gradient(red, yellow 10%, green 15%);  

 css

background-color: red; / 浏览器不支持的时候显示 /
background-image: radial-gradient(red 5%, green 15%, blue 60%); / 标准的语法(必须放在最后) / 
  效果

file

IE兼容
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#51098A, endColorstr=#ffffff);/IE<9>/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#51098A, endColorstr=#ffffff)";/IE8+/
  IE依靠filter实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色, GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变

.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#000000‘, endColorstr=‘#ffffff‘,GradientType=0 );
}
:root .gradient{filter:none;}
  参考:http://caibaojian.com/css3-background-gradient.html

     http://caibaojian.com/css3/values/image/linear-gradient().htm

css3-背景渐变

标签:type 重复 width image highlight strong 参考 repeat load

原文地址:https://www.cnblogs.com/GoTing/p/13847893.html

发表评论

0/200
0 点赞
0 评论
收藏
为你推荐 换一批