詳解CSS盒子效果

來源:互聯網
上載者:User
CSS盒子效果:

<!DOCTYPE html><html><head><!--聲明當前頁面的編碼格式 UTF-8(國際編碼)gbk(中文簡體)--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--聲明當前頁面的三要素--><title>CSS盒子效果</title><meta name="Keywords" content="關鍵字"><meta name="Description" content="描述"><style type="text/css">*{margin:0; padding:0;}/*萬用字元*/body{ color:#fff;}.box-common {  padding: 5px 10px;  margin: 10px;  font-size: 21px;  line-height: 1.3em;  border: 2px dashed #fff;  border-radius: 3px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;}.red{  background: #ff0030;  color: #fff;  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);  text-shadow: -1px -1px #aa3030;}.blue{  background: blue;  color: #fff;  -moz-box-shadow: 0 0 0 4px blue, 2px 1px 4px 4px rgba(10,10,0,.5);  -webkit-box-shadow: 0 0 0 4px blue, 2px 1px 4px 4px rgba(10,10,0,.5);  box-shadow: 0 0 0 4px blue, 2px 1px 6px 4px rgba(10,10,0,.5);  text-shadow: -1px -1px #aa3030;}.green{ background: green; color: #fff;  -moz-box-shadow: 0 0 0 4px green, 2px 1px 4px 4px rgba(10,10,0,.5);  -webkit-box-shadow: 0 0 0 4px green, 2px 1px 4px 4px rgba(10,10,0,.5);  box-shadow: 0 0 0 4px green, 2px 1px 6px 4px rgba(10,10,0,.5);  text-shadow: -1px -1px #aa3030;}</style></head><body><p class="box-common red">效果示範</p><p class="box-common blue">效果示範</p><p class="box-common green">效果示範</p></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.