如何使用css3给图片实现渐变效果
小编给大家分享一下如何使用css3给图片实现渐变效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
浏览器支持情况
IE | FF | Chrome | Safari | Opera | iOS | Android | Android Chrome |
---|---|---|---|---|---|---|---|
6-9(no) | 2-3.5(no) | 4-9(部分-webkit-) | 3.1-3.2(no) | - | 3.2-4.3(部分) | 2.1-3.0(-webkit-) | 10-25(-webkit-) |
10+ | 3.6-15(-webkit-) | 10-25(-webkit-) | 4-5(部分)5-6.1(-webkit-) | - | 5+ | 4-4.3(-webkit-) | 26+ |
- | 15+ | 25+ | 5-6 | 15+ | - | 4.4+ | - |
线性渐变 linear-gradient
使用语法
linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);
以下代码都可以运行,执行的结果一样
linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-gradient(180deg, #fff, #333); linear-gradient(to bottom, #fff 0%, #333 100%);
可以定义角度,起始方向,颜色,以及颜色占比
demo
<div style="width: 200px; height: 200px;"></div> <style> div { background: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet ); } </style>
填充试线性渐变 repeating-linear-gradient
用法和 linear-gradient 差不多,其实就是渐变的一个填充。可以精确到像素,比如实现一个斑马纹
<div class="g"></div> <style> .g { background: repeating-linear-gradient( -45deg, transprent, transprent 25px, #fff 25px, #fff50px ); } </style>
径向渐变 radial-gradient
使用语法
radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )
以下代码执行结果一样
radial-gradient(circle, #f00, #ff0, #080); radial-gradient(circle at center, #f00, #ff0, #080); radial-gradient(circle at 50%, #f00, #ff0, #080); radial-gradient(circle farthest-corner, #f00, #ff0, #080);
可以通过 length 来快速定位形状的位置closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side 与 closest-side 相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
可以通过 at 来快速制定圆心的位置circle at left top圆心在左上角
circle at right top圆心在右上角
circle at left bottom 圆心在左下角
circle at right bottom 圆心在右下角
circle at center | at 50% 圆心在正中间
代码示例
<style> div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd; } .g1 { background: radial-gradient(circle at center, #f00, #ff0, #080); } .g2 { background: radial-gradient(circle closest-side, #f00, #ff0, #080); } .g3 { background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%); } .g4 { background: radial-gradient(at top right, #f00, #ff0, #080); } .g5 { background: radial-gradient(farthest-side at top right, #f00, #ff0, #080); } .g6 { background: radial-gradient( farthest-side at top right, #f00, #ff0, #080, transparent ), radial-gradient(60px at top left, #f00, #ff0, #080); } </style> <div class="g1"></div> <div class="g2"></div> <div class="g3"></div> <div class="g4"></div> <div class="g5"></div> <div class="g6"></div>
得到如下
填充式径向渐变repeating-radial-gradient
这个和 repeating-linear-gradient 使用差不多,就是对渐变的填充。
代码示例
<style> div { width: 200px; height: 100px; border: 1px solid #ddd; float: left; margin: 10px; } .g1 { background: repeating-radial-gradient(circle, #f00 0, #ff0 10%, #f00 15%); } .g2 { background: repeating-radial-gradient( at top left, #f00, #ff0 10%, #080 15%, #ff0 20%, #f00 25% ); } .g3 { background: repeating-radial-gradient( circle closest-corner at 20px 50px, #f00, #ff0 10%, #080 20%, #ff0 30%, #f00 40% ); } </style> <div class="g1"></div> <div class="g2"></div> <div class="g3"></div>
以上是“如何使用css3给图片实现渐变效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!