CSS3-文本.字体.颜色讲稿.docx

文本新增颜色模式rgbarRed红0-255gGreen绿0-255bBlue蓝0-255aAlpha透明0-1实例: 背景透明，文字不透明问题：注意边框颜色透明有问题stylebody{background:url(miaov.jpg);}.box{width:100px;height:100px;background:rgba(0,0,0,0.5);}/style/headbodydiv class=box/div/body实例: 背景透明，文字不透明stylebody{background:url(miaov.jpg);}.box{width:200px;height:200px;background:rgba(0,0,0,0.5); color:#fff; font:40px/100px 微软雅黑; text-align:center;}/style/headbodydiv class=box妙味课堂/div/body实例: 文字透明style.box{width:200px;height:190px;background:url(miaov.jpg) no-repeat center; color:#fff; font:80px/90px 微软雅黑; text-align:center; color:rgba(255,255,255,0.5);border:10px solid rgba(0,0,0,0.5);}/style/headbodydiv class=box妙味课堂/div/body边框透明，但有问题，边框会透明背后的图片style.box{width:200px;height:190px;background:url(miaov.jpg) no-repeat center; color:#fff; font:80px/90px 微软雅黑; text-align:center; color:rgba(255,255,255,0.5);border:10px solid rgba(0,0,0,0.5);}/style/headbodydiv class=box妙味课堂/div/body文字阴影text-shadow：x y blur color, …参数x横向偏移y纵向偏移blur模糊距离color阴影颜色文本阴影如果加很多层，会很卡很卡很卡多层之间逗号隔开styleh1{ font:100px/200px 微软雅黑; text-align:center; text-shadow:-5px -10px 1px red,5px 10px 2px green,1px 1px 5px yellow;}/style/headbodyh1妙味课堂/h1/body文字阴影应用最简单用法text-shadow:2px 2px 4px black阴影叠加text-shadow:2px 2px 0px red, 2px 2px 4px green;先渲染后面的，再渲染前面的几个好玩的例子层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;应用1：文字模糊styleh1{ font:100px/200px 微软雅黑; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,1); border:1px solid #000; transition:1s;}h1:hover{color:rgba(0,0,0,0);text-shadow:0