CSS3浏览器前缀
-ms-box-shadow lE浏览器专属-moz-
-moz-box-shadow基于Gecko引擎的浏览器(如Firefox)-O-
-o-box-shadow Opera浏览器专属-webkit-
-webkit-box-shadow基于Webkit引擎的浏览器(如Chrome、Safari)
/* word-break: break-all; 允许在单词内换行 可以强行阶段英文单词 达到换行效果
word-break: keep-all; 不允许中文字断开 在标点符号后换行
text-transform: capitalize; 文件中每个单词以大写字母开头
text-transform: lowercase; 定义无大写字母 仅有小写字母
text-transform: uppercase; 定义仅有大写字母
text-transform: none;默认
font-variant:small-caps:浏览器会显示小型大写做字母的字体 */
/* word-wrap: break-word;在长单词活url地地址内部进行换行 将内容在边界内换行(不截断英文单词换行) */
背景渐变:
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:属性值