<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; margin: 100px auto; background: pink; opacity: 0.1; } #inner{ width: 100px; height: 100px; background: deeppink; } </style> </head> <body> <div id="wrap"> <div id="inner"> inner </div> </div> </body> </html>
设置文字阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; margin: 100px auto; background: rgba(0,0,0,.5); /* 最后的.5是透明度 */ } </style> </head> <body style="background: url(img/zdy.jpg);"> <div id="wrap"> </div> </body> </html>
rgba的使用，注意 background:rgba(0,0,0,.5);最后的.5是透明度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; margin: 100px auto; background: rgba(0,0,0,.1); color: #FFFFFF; font-size: 30px; line-height: 300px; text-align: center; } </style> </head> <body> <div id="wrap"> 我是wrap </div> </body> </html>
背景透明文字不透明、
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> h1{ font:100px/200px "微软雅黑"; text-align:center; text-shadow: -5px -10px ,5px 10px pink; /* text-shadow: ;中的参数 颜色 偏移量 模糊程度*/ } </style> </head> <body> <h1>尚硅谷</h1> </body> </html>
文字阴影 text-shadow属性，属性值分别是 颜色 偏移量（-x -y） 模糊程度
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /* h1{ font:100px/200px "微软雅黑"; color: white; text-align:center; text-shadow:2px 2px 9px black; } */ h1{ font: 100px/200px "微软雅黑"; text-align: center; color: white; text-shadow: black 1px 11px 10px; } </style> </head> <body> <h1>尚硅谷</h1> </body> </html>
设置文字浮雕注意运用text-shadow
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /* h1{ 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 0 100px rgba(0,0,0,0.5); } */ h1{ font: 100px/200px "微软雅黑"; text-align: center; color: black; transition: 1s; } h1:hover{ color: rgba(0,0,0,0); text-shadow: black 0 0 50px; } </style> </head> <body> <h1>尚硅谷</h1> </body> </html>
使用伪类hover
原文：https://www.cnblogs.com/kfj010810/p/15005841.html