Tags: / Posted in 前端研究

简单方便的CSS盒子多个边框

2012-01-17

主流浏览器都支持，前和后的伪元素（所有主要浏览器），我们可以利用这种效应优势。当然，也有替代品，包括使用盒子阴影，以及增加额外的标记页面，然而这是最干净的解决方案。（经测试在我的傲游3的IE模式下没效果）

  1. <!DOCTYPE html>
  3. <html lang=”en“> 
  4. <head> 
  5.     <meta charset=”utf-8“>
  6.     <title>Multi-Borders</title>
  7.     <style> 
  8.         body { background: #d2d1d0; }
  10.         #box {
  11.             background: #f4f4f4;
  12.             border: 1px solid #bbbbbb;
  13.             width: 200px;
  14.             height: 200px;
  15.             margin: 60px auto;
  16.             position: relative;
  17.         }
  19.         #box:before {
  20.             border: 1px solid white;
  21.             content: ”;
  22.             width: 198px;
  23.             height: 198px;
  24.             position: absolute;
  25.         }
  27.         #box:after {
  28.             content: ”;
  29.             position: absolute;
  30.             width: 196px;
  31.             height: 196px;
  32.             border: 1px solid #bbbbbb;
  33.             left: 1px; top: 1px;
  34.         }
  35.     </style> 
  37. </head> 
  38. <body> 
  39.     <div id=”box“></div>  
  40. </body>
  41. </html> 

日期存档

发表评论