CSS3重复渐变(线性和径向渐变)
来源:互联网 发布:手机如何连接电脑网络 编辑:程序博客网 时间:2024/04/30 13:04
1.标准语法:
background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px);//重复线性渐变background-image:repeating-radial-gradient(red,green 40px, orange 80px);//重复径向渐变
各主流浏览器兼容性写法是在前面加上对应的私有前缀!
2.利用重复渐变制作记事本纸张效果
技巧:通过重复线性渐变制作纸张背景效果,再使用before伪类来模拟纸张的竖线条纹!但还需要另一个属性background-size,用来指定背景图像的大小为100% 30px。尽管CSS3渐变显示的是颜色,实际上他是一张图像而不是颜色。
CSS3
html, body{ margin:0;padding:0; height:100%; } body{ background-image:-webkit-repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px); background-image:repeating-linear-gradient(to top,#f9f9f9,#f9f9f9 29px,#ccc 30px); /*指定背景图片大小,关键点!*/ background-size: 100% 30px; position: relative; } /*伪类制作竖线*/ body:before{ content:''; display: inline-block; height:100%; width:4px; border-left:4px double #fca1a1; position:absolute; left:30px; }
3.利用重复渐变制作纹理效果
CSS
html, body{ margin:0;padding:0; height:100%; } body{ background-image:linear-gradient(0deg,rgba(255,255,255,.2) 50%,transparent 50%,transparent); /*指定背景图片大小,关键点!*/ background-size:50px 50px; background-color: red;//按需要改动背景色 }
4. 平滑过渡渐变和突然过渡渐变:
.box{ width:200px;height:200px; border:1px solid #000;float:left; /*突然过渡:在过渡颜色附近多加一处颜色值来实现突然过渡效果*/ background-image:linear-gradient(top,red 0,red 50%,green 50%); }
.box2{ width:200px;height:200px; border:1px solid #000;float:left; /* 平滑过渡*/ background-image:-webkit-linear-gradient(top,red 0,green 50%); }
总结:理清好这个过渡效果,在使用重复渐变背景制作各种背景图片时候是很有用的!至少你不会很乱,为什么突然比想象中多了好多个颜色值以及对应的位置。
1 0
- CSS3重复渐变(线性和径向渐变)
- css3渐变、线性渐变和径向渐变
- 详解CSS3渐变(线性和径向)
- css3 线性渐变和径向渐变样式
- css3 线性渐变和径向渐变
- CSS3的线性渐变 和 径向渐变。
- CSS3之渐变(线性渐变,径向渐变)
- CSS3-颜色渐变--线性渐变+径向渐变
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3 Gradient 线性渐变 径向渐变
- CSS3 Gradient 线性渐变/径向渐变
- CSS3线性渐变与径向渐变
- 渐变:线性渐变、径向渐变
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
- CSS3 两种类型的渐变(lineat Gradients线性渐变和Radial Gradients径向渐变)
- CSS3线性渐变 径向渐变 background linear-gradient radial-gradient
- 函数
- 将clvm的状态改成no-clustered
- 绑定一把枪到手上,添加一个开枪的效果
- 彩票小例子
- 【bzoj1444】【jsoi2009】【有趣的游戏】【AC自动机+矩阵乘法】
- CSS3重复渐变(线性和径向渐变)
- APP跳到AppStore 下载的实现
- linux vlan configuration
- python爬虫1
- UML类图建模简介
- java学习路线图
- UITabView/UICollectionView 全选问题
- XSS实战篇
- Android Studio下开启手机无线调试