CSS3_线性渐变(linear-gradient)+ 盒子阴影(box-shadow)
-——css3的文章好久没有写过了。今天看到一个比较酷炫的属性——线性渐变(linear-gradient),决定谈谈这个属性。
linear-gradient
——CSS3 grandient分为线性渐变(linear-gradient)和径向渐变(radial-gradient)。今天主要谈谈线性渐变。(PS:在IE下的实现需要通过IE特有的滤镜来实现。)
线性渐变的语法
先来看看Mozilla、Webkit、Opera下的语法
1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ); 2 3 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 4 5 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
参数说明:
1, 第一个参数表示线性渐变的方向,top是从上到下,left是从左到右,如果定义了left top,那就是从左上角到右下角。
2, 第二个和第三个参数分别是起点颜色和终点颜色。你可以在它们之前插入更多的参数,表示多种颜色的渐变。
线性渐变在Trident(IE)下的应用
1 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ 2 3 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr 表示终点颜色。GradientType 表示渐变类型,0 为缺省值,表示垂直渐变,1 表示水平渐变。
角度方向的渐变
——需要特别说明一下的就是角度方向的渐变
当指定渐变方向是角度的时候,它是一个由水平线与渐变线产生的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。
详情请参考这篇文章:
CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
下面来看看box-shadow
box-shadow
——box-shadow作为CSS3的一个新属性,效果还是不错的。下面来看看它的语法
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
属性说明:
1,h-shadow : horizontal shadow 水平方向的阴影
2,v-shadow : vertical shadow 垂直方向的阴影
3,blur : 阴影模糊的距离
4,spread : 阴影的大小
5,color : 阴影的颜色
6,inset : 改变阴影的方向
如果你的审美还错,并且对这个属性理解不错,那这个属性还是可以发挥他较大的作用的。
例子
下面来看一个例子:
贴上代码
1 *{ 2 margin:0; 3 padding:0; 4 } 5 .box-wrapper{ 6 cursor: pointer; 7 position: relative; 8 width: 300px; 9 height: 200px; 10 margin: 100px auto; 11 border-radius: 5px; 12 background: #fd6a7f; 13 overflow: hidden; 14 -webkit-transition:all .3s ease; 15 transition:all .3s ease; 16 } 17 .gradient{ 18 cursor: pointer; 19 position: absolute; 20 top: 0; 21 left: -100%; 22 width: 100%; 23 height: 100%; 24 transform: skew(-25deg); 25 -o-transform:skew(-25deg); 26 -moz-transform:skew(-25deg); 27 -webkit-transform:skew(-25deg); 28 background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.5),hsla(0,0%,100%,0)); 29 -webkit-transition:all .3s ease; 30 transition:all .3s ease; 31 } 32 .box-wrapper:hover{ 33 transform: translateY(-6px); 34 -webkit-transform: translateY(-6px); 35 -moz-transform:translateY(-6px); 36 box-shadow: 0 26px 40px -24px rgba(0,36,100,.5); 37 -webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5); 38 -moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.5); 39 } 40 .box-wrapper:hover .gradient{ 41 left: 100%; 42 }
CSS
1 <div class="box-wrapper"> 2 <div class="gradient"></div> 3 </div>
以上内容,如有错误请指出,不甚感激。
转载于:https://www.cnblogs.com/adelina-blog/p/7156126.html
CSS3_线性渐变(linear-gradient)+ 盒子阴影(box-shadow)相关推荐
- CSS3_线性渐变_径向渐变----背景
渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css中的渐变的属性,CSS3 渐变属性(Gradients)-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
- CSS3 线性渐变(linear-gradient)
在CSS3出现之前,渐变效果只能通过图形软件(比如Photoshop)设计图片来实现,可拓展性差,还影响性能,而且还必须要会PS.如今通过CSS3可以很轻松的完成渐变效果. 一.线性渐变的基础知识介绍 ...
- html垂直线性渐变,再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...
- Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
- 在html中如何添加线性渐变,CSS3如何实现线性渐变效果
CSS3实现线性渐变效果的方法:首先创建一个HTML示例文件:然后在body中创建一个div:最后通过"linear-gradient"属性实现线性渐变效果即可. 本文操作环境:w ...
最新文章
- 听君今一言,似读半月书
- 【AOP 面向切面编程】Android Studio 中配置 AspectJ ( 下载并配置AS中 jar 包 | 配置 Gradle 和 Gradle 插件版本 | 配置 Gradle 构建脚本 )
- 企业日志分析之linux系统message收集展示
- 你的Redis为什么变慢了?
- 图像降噪算法——Variance Stabilizing Transform / Generalization Anscombe Transform算法
- New beginning
- shell脚本传可选参数 getopts 和 getopt的方法
- Azure实践之如何批量为资源组虚拟机创建alert
- 单目深度估计方法:现状与前瞻
- Best Friend Forever
- 鸿蒙HI3516-驱动开发(1.1-LTS)
- Oracle物化视图的创建及使用(一
- 在吗,支付宝土味情歌撩到你了吗?网友:撩到了,好酸
- 花2.9元买一包头绳,收到一张3元好评返现卡,我凌乱了……
- 基于上下文化图注意力网络的知识图谱的条目推荐
- 深度之眼-科赛网二分类大赛入门之路
- Downloading Quest SQL Optimizer for Oracle
- 啦啦外卖41.8[四端全开源版本]
- 金狐超级软件盘 07.14更新
- SPSS入门教程——方差齐性检验的方法有哪些