CSS3浏览器前缀，背景大小，位置，渐变以及过渡效果

CSS3浏览器前缀

-ms-
-ms-box-shadow IE浏览器专属
-moz-
-moz-box-shadow 基于Gecko引擎的浏览器（如Firefox）
-o-
-o-box-shadow Opera浏览器专属
-webkit-
-webkit-box-shadow 基于Webkit引擎的浏览器（如Chrome、Safari）

CSS3优雅降级渐进增强

渐进增强（Progressive
Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3
的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

.transition { /*渐进增强写法 从小到大*/-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;
}

.transition { /*优雅降级写法 从大到小*/transition: all .5s;-o-transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5s;
}

CSS3背景渐变

linear-gradient(线性渐变)和radial-gradient(径向渐变)：可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）-
由它们的中心定义

线性渐变

至少定义两种颜色结点

语法：
background/background-image:
linear-gradient(2~多个颜色，颜色中间用逗号分隔)
linear-gradient(to方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)
linear-gradient**(度数deg,2~多个颜色，颜色中间用逗号分隔)【从上开始，顺时针】**

加浏览器内核：
-webkit-linear-gradient (2~多个颜色，颜色中间用逗号分隔)
-webkit-linear-gradient (方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)【注：方向没有to，是指明的方向】
-webkit-linear-gradient (度数deg,2~多个颜色，颜色中间用逗号分隔)【从右开始，逆时针】

径向渐变

语法:
background/background-image :
radial-gradient (2至多个颜色)在颜色后面添加百分比【从小到大顺序】
-webkit-radial-gradient (方位,颜色)
方位，形状，颜色
例：background:-webkit-radial-gradient(top,circle, black 5%,white 10%,black 15%);

重复渐变:repeating[颜色必须跟百分比，否则无法形成重复渐变的效果]【百分比从小到大】

背景大小设置

background-size:需要调整背景图片的大小

四类：像素值【单个看到设置为固定像素值，高度会等比例变化】【两个第一个宽度第二个高度】
百分比【单个/两个】
参照像素值：
cover：背景图片把整个背景全部覆盖； contain：一边铺满，另一边等比例，保持始终在div范围内；

背景图片位置

background-clip：调整背景位置

content-box：将背景图片放在内容区
padding-box：将背景图片放在内边距范围内
border-box：将背景图片放在边框范围内【默认】

过渡效果

transition-property：需要过渡的样式，默认all 、
transition-duration：运动时间默认0s
transition-delay：延迟时间默认0s
transition-timing-function：运动形式默认ease
A.ease(慢快慢) B.linear(匀速) ease-in(加速) C.ease-out(减速)
D.ease-in-out(先加速后减速) E.cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
http:cubic-bezier.com F.steps()实现一个关键逐帧动画的功能
可直接写transition：过渡样式运动时间延迟时间运动形式

CSS3浏览器前缀，背景大小，位置，渐变以及过渡效果相关推荐

CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
浏览器前缀/ css3 渐变 /
浏览器私有前缀为了浏览器兼容新的css3属性 -ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-sha ...
html背景位置渐变,css 背景和渐变
css 背景和渐变 background 背景所有背景属性都不能继承在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background ...
背景图像位置css_CSS背景图像大小教程–如何对整页背景图像进行编码
背景图像位置css This tutorial will show you a simple way to code a full page background image using CSS. A ...
html背景图片尺寸位置百分比,css – 如何计算背景大小百分比？
根据 W3C Specs: A percentage is relative to the background positioning area. 和background positioning a ...
css3兼容各版本浏览器前缀—— -webkit-、 -moz-、 -ms-、 -o-
css3兼容各版本浏览器前缀前缀浏览器 -webkit- :chrome(谷歌).safari(游猎) -moz- : firefox(火狐) -ms- :IE -o- : opera
CSS3如何调整背景图片大小
系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何改变背景图片大小系列文章目录一.background-size 语法格式二.参数详解 1.length 2.p ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...

CSS3浏览器前缀，背景大小，位置，渐变以及过渡效果

CSS3浏览器前缀

CSS3优雅降级渐进增强

CSS3背景渐变

线性渐变

径向渐变

背景大小设置

背景图片位置

过渡效果

CSS3浏览器前缀，背景大小，位置，渐变以及过渡效果相关推荐

最新文章

热门文章