<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型小实例</title> </head> <style> body{ background-color:#f8f9fa; } .box1{ box-shadow: 7px 7px 10px 0 rgba(76, 110, 245,.1); text-align: center; padding: 15px ; background-color: #fff; margin:30px; } .fry_card_icon{ color: #ff4f81;| text-align: center; font-size: 30px; margin-bottom: 10px; } .fry_card_title{ font-size: 20px; font-weight: 600; color: #333; letter-spacing: 1px; margin-bottom: 10px; } .fry_card_content{ font-size: 15px; color: #77; margin-bottom: 5px; } div>h1{ color:blue; /*字体透明度设置*/ color:rgba(255,34,23,0.8) } div>img{ /*模块透明度设置*/ opacity:0.8; } </style> <body> <div class="box1"> <span class="fa fa-building fa-fw fry_card_icon" style=""></span> <div class="fry_card_title" style="">课程</div> <p class="fry_card_content" style="">大量精品编程课程</p> </div> <div> <h1>透明的字</h1> <img src="../Html5学习/cjf.png" alt="头像"> </div> </body> </html>