一、文本新增样式
opacity 不透明度
h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body> <h1>中山大学</h1> </body>
效果
rgba透明度(选中的就透明)一般应用在背景透明,文字不透明。是rgb的一个拓展,a的值在(0,1)之间,就是针对前面的颜色的一个透明度/不透明度的描述.
h1{ margin: 100px auto; color: rgba(255, 0, 0, 0.8);文字的(255,0,0)颜色的不透明度为0.8 background-color: rgb(1,1,1); } </style> </head> <body> <h1>中山大学</h1> </body>
text-shadow:文字阴影,可以多层,阴影值之间可以用逗号隔开。前两个设置是偏移量,后面是模糊程度。
实战:做一个浮雕文字和文字模糊的效果
浮雕文字:
h1{ margin: 200px auto; color: white; text-shadow: black 1px 1px 10px; } </head> <body> <h1>中山大学</h1> </body>
效果:
文字模糊(悬浮在文字上面就出现模糊):
h1{ text-align: center; color: black; } h1:hover{ color: white; text-shadow: black 1px 1px 100px; } </style> </head> <body> <h1>中山大学</h1> </body>
效果前后: