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

下载文档 降价啦

1
0
约2.85千字
约 7页
2017-02-05 发布于湖北
举报
版权申诉
保障服务

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

1、本文档共7页，可阅读全部内容。
2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

CSS3-文本.字体.颜色

文本新增颜色模式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