文字新增属性

rgba、文字阴影、文字描边、文字排版

HTML

<h1>启冠网络</h1>
<p class="p">启冠网络</p>
<p class="p1">启冠网络</p>
<p class="p2">启冠网络</p>
<em class="p3">启冠网络</em>
<p class="p4">杭州启冠网络股份有限公司杭州启冠网络股份有限公司杭州启冠网络股份有限公司</p>
<span>启冠网络</span>

CSS

			h1{
				font:100px/200px "微软雅黑";
				text-align: center;
				text-shadow: 5px 5px 1px red,5px 5px 10px green;
			}
			.p,.p1,.p2{
				font:100px/200px "微软雅黑";
				text-align: center;
				color: #fff;
				text-shadow: 2px 2px 4px #000;
			}
			.p1{
				text-shadow: 0 0 0 rgba(0,0,0,1);
				border: 1px solid #000;
				color: #000;
				transition: 1s;
			}
			.p1:hover{
				color: rgba(0,0,0,0);
				text-shadow: 0 0 100px rgba(0,0,0,0.5);
			}
			span{
				display: block;
				font:100px/200px "微软雅黑";
				text-align: center;
				color: white;
				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;
			}
			
			
			/*文字描边  -webkit-text-stroke:宽度 颜色 */
			.p2{
				font:100px/200px "微软雅黑";
				text-align: center;
				color: #000;
				text-shadow: none;
				-webkit-text-stroke: 3px red;
			}
			
			/*文字排版   全兼容的*/
			.p3{
				display: block;
				width: 300px;
				border: 1px solid #000;
				font:14px/30px "微软雅黑";
				text-shadow: none;
				color: #000;
				direction: rtl;
				unicode-bidi: bidi-override;
			}
			
			/*文字超出显示省略号 全兼容*/
			.p4{
				width: 300px;
				border: 1px solid #000;
				font:14px/30px "微软雅黑";
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}