关于背景
一. 渐变&径向渐变(background-image: -webkit-linear-gradient() && background-image: -webkit-radial-gradient())
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { margin: 200px 0 0 200px; width: 200px; height: 200px; background-color: orange; /* 不用浏览器前缀 chrome : -webkit- Firefox : -moz-; IE : -ms-; opera : -o-; */ /* 1 基本用法*/ /*旋转角度，竖直开始；加前缀，水平开始*/ /*background-image: -webkit-linear-gradient(rgba(255,0,0,.2), yellow, blue 30%, green 100%); background-image: -o-linear-gradient(rgba(255,0,0,.2), yellow, blue, green); background-image: linear-gradient(rgba(255,0,0,.2), yellow , blue 30%, green 30%);*/ /*控制颜色渐变的方向 to right -- 从左向右 to top -- 从下到上 to left -- 从右到左 to bottom --- 从上到下（默认值） */ /*0deg = to top -- 从下到上*/ /*基于0度顺时针旋转45deg*/ /*基于0度逆时针旋转45deg*/ /*设置过渡颜色的起始位置*/ /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/ /* 2 径向渐变 : 由圆点向外延伸*/ background-image: -webkit-radial-gradient(100px 100px,blue,white,red,black,purple,navy,green,yellow); } </style> </head> <body> <div class="box"></div> <script type="text/javascript"> </script> </body> </html>
二. 渐变&径向渐变()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 508px; height: 300px; border: 10px solid #000; padding: 100px; background: url("C:\\Users\\Public\\Pictures\\Sample Pictures\\jjy.jpg") ; /* 默认：background-clip: padding-box; */ /* background-clip: content-box; border-box 背景被裁剪到边框盒。 测试 padding-box 背景被裁剪到内边距框。 测试 content-box 背景被裁剪到内容框。 */ background-clip: content-box; /* background-origin: padding-box|border-box|content-box; padding-box 背景图像相对于内边距框来定位。（默认） border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 */ background-origin: content-box; /* background-size: length|percentage|cover|contain; length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。(原图) contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(保证不变形) */ /*background-size: 100px;*/ /*background-size: 600px auto; */ /*background-size: 100%;*/ background-size: cover; /*background-size: contain;*//*这个等价于background-size: 100%;*/ /* 多背景：一个盒子可以携带多个背景。 */ /* background: url() repeat-y, url() no-repeat, url(); background-size: auto auto, 600px 600px, auto auto; */ } </style> </head> <body> <div>文字</div> </body> </html>
三.过渡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 1.过渡：表示元素从状态1 到 状态2 变化不是瞬间的，而是动画。可以用css3 的 transition属性制作。css3前，是通过js的定时器(setInterval)实现。transition是浏览器内核c++实现的，因此效率极高。不过可能存在兼容问题。 2.基本语法 transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间. transition-timing-function 规定过渡效果的时间曲线。 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); transition-delay 规定过渡效果何时开始. transition: "过渡的属性名称 all表示所有" "过渡所需时间" "过渡时间曲线" "过渡开始时间"; */ div{ width: 500px; height: 500px; background: yellowgreen; transition: all 2s linear; } div:hover{ background: red; } /* 3.哪些属性不能用过渡？渐变色、float；几乎都可以用过渡属性。 对比：JQ的animate函数对 background-color，background-position不支持，css3支持。 */ /* 4.什么是否出发过渡？ 任何的css变化都会触发过渡。 */ </style> </head> <body> <div></div> </body> </html>
