• 文字新增属性


    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;
    				 300px;
    				border: 1px solid #000;
    				font:14px/30px "微软雅黑";
    				text-shadow: none;
    				color: #000;
    				direction: rtl;
    				unicode-bidi: bidi-override;
    			}
    			
    			/*文字超出显示省略号 全兼容*/
    			.p4{
    				 300px;
    				border: 1px solid #000;
    				font:14px/30px "微软雅黑";
    				white-space: nowrap;
    				overflow: hidden;
    				text-overflow: ellipsis;
    			}
    

      

  • 相关阅读:
    Chap2: question: 1
    资格赛:题目3:格格取数
    资格赛:题目2:大神与三位小伙伴
    资格赛:题目1:同构
    最大流问题
    webpack(5)配置打包less和sass
    webpack(4)配置打包css
    C++进阶知识点(3)类的静态成员 字符和数字的互转 lambda
    ubuntu shell 监控某个进程占用的资源
    webpack(4)配置打包多个html
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8118296.html
Copyright © 2020-2023  润新知