CSS3 實用技巧：漂亮的盒子效果

您可能感興趣的相關文章

• 2012年最酷的25個 CSS3 學習教程
  
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 20個非常絢麗的 CSS3 特性應用演示
• 24款非常實用的 CSS3 工具終極收藏

 

效果演示

 

效果演示

 

效果演示

 

p {
  padding: 5px 10px;
  margin: 10px;
  background: #ff0030;
  color: #fff;
  font-size: 21px;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -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;
}

 

更多實用 CSS3 技巧：幫助你美化網站的10+實用 CSS3 技巧

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源