文字阴影.element{ text-shadow:1px 1px 1px #cccccc;}先右再下第一个值：右侧阴影的大小第二个值：下方阴影的大小第三个值：模糊距离（阴影从开始变淡到完全消失的距离）最后一个值：阴影颜色
阴影值也可以使用em或rem单位取消文字阴影 text-shadow:none;浮雕文字效果：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可
多重文字阴影，只需将两组值使用逗号分隔开即可，如：text-shadow:0px 1px #ffffff,4px 4px 0px #dad7d7;
盒阴影-ms-box-shadow:0px 3px 5px #444444;-moz-box-shadow:0px 3px 5px #444444;-webkit-box-shadow:0px 3px 5px #444444;box-shadow:0px 3px 5px #444444;
内阴影阴影出现在元素内部box-shadow:inset 0 0 40px #000000;多出来的inset告诉浏览器设置内阴影效果可用来制作光晕效果
多重阴影box-shadow:inset 0 0 30px hsl(0,0%,0%), inset 0 0 70px hsla(0,97%,53%,1);即两组值用逗号分开，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上（代码中先声明的规则，在浏览器中会覆盖下面的规则）如上代码中，黑色覆盖红色，但两者并存box-shadow:0px 3px 5px #444444;
线性背景渐变background:linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);第一个值定义了渐变的方向，默认是一个垂直从顶部到底部的渐变。还可以使用如to top right这样的值，会产生一个朝向右上角的对角线渐变下一个值定义了渐变的起点，包括颜色和位置。起点位置可以使用负值，这样渐变从实际可见区域之外就开始了下一个值指的是“过渡颜色点”。可以在渐变终点之前定义更多的过渡颜色点（使用逗号分隔）圆括号中的最后一个值始终是渐变的终点
径向背景渐变1.background:radial-gradient(center,ellipse cover,#ffffff 72%,#dddddd 100%);2.background:radial-gradient(25px 25px,ellipse cover,#ffffff 72%,#dddddd 100%);第一个值，渐变起点第二个值，渐变形状circle，或者ellipse，后跟随半径其大小值如下：closest-side:(渐变形状是圆形时)以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最近的水平或垂直边为渐变半径closest-corner:以距离中心点最近的一角为渐变半径farthest-side:和closest-side相反，(渐变形状是圆形时)以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最远的水平或垂直边为渐变半径farthest-corner:以距离中心点最远的一角为渐变半径cover:和farthest-corner完全一样contain:和closest-side完全一样接下来是定义渐变起点、过渡颜色点以及终点
重复渐变1.background:repeating-linear-gradient(90deg,#ffffff 0px,red 5px);2.background:repeating-radial-gradient(2px 2px,ellipse,red 2px,blue 10px, yellow 15px,green 20px);加前缀repeating
背景渐变图案body{ background-color:white; background-image: radial-gradient(hsla(0,0%,87%,0.31) 9px,transparent 10px), repeating-radial-gradient(hsla(0,0%,87%,0.31) 0, hsla(0,0%,87%,0.31) 4px,transparent 5px, transparent 20px,hsla(0,0%,87%,0.31) 21px, hsla(0,0%,87%,0.31) 25px,transparent 26px, transparent 50px);background-size:30px 30px,90px 90px;background-position:0 0;}
border-radius
多重背景图片
制作一个顶部和底部使用不同背景图片的页面
<body class="headerBackgroundHere"> <div class="footerBackground"> <div id="container"> <header> </header> <div id="main" role="main"> </div> <footer> </footer> </div> </div> </body> body{ background-image:url("1.png"); background-repeat:repeat-x; } .footerBackground{ background-image:url("2.png"); background-repeat:repeat-x; background-position:bottom; }CSS3允许为一个元素设定多重背景语法如下：background:url(''), url(''), url('');排在最前的图片在浏览器中显示时会覆盖在最上面，还可以在声明中追加背景颜色，如下：background:url(''), url(''), url('') left bottom,black;将颜色定义在最后，背景色就会显示在所有背景图片下面
背景图片大小 background-size属性使用多重背景时，语法如下：background-size:100% 50%,200px 400px,auto;按照背景属性中图片的顺序对应排列。auto：使用图片的原始大小cover: 按照原始图片的长宽比缩放图片以填充整个元素区域contain：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小
背景图片位置background:url('') center, url(''), url('') left bottom,black;默认是top left
转载于:https://www.cnblogs.com/919czzl/p/4957617.html
