关于背景
一. 渐变&径向渐变(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></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>
CSS3-3
原文地址：https://www.cnblogs.com/hangege/p/9085748.html