表中的羽毛邊角如何？

我以前用的這種「文檔化**」格式，只是一個例子：表中的羽毛邊角如何？

<html><head><link rel="stylesheet" href="style.css" type="text/css"><base target="_blank"></head><body> 
<table class="tablet"><tr><td><pre style="margin-bottom:0;"> 
find . -type f -size 0 
</pre></td></tr></table> 
</body></html>

圖片：http://i.stack.imgur.com/1lTG5.png

**到例如文件Linux /等。 HOWTO文檔。

的style.css

table.tablet 
    { 
     width: 98%; 
     background: #ffffff; 
     color: #000000; 
     border-width: 1px; 
     border-style: solid; 
     border-color: #000000; 
     padding-top: 5; 
     padding-bottom: 5; 
     padding-right: 10; 
     padding-left: 10; 
     font-size: 110%; 
     font-family: "times"; 
     font-weight: normal; 
     border-left: 5px solid #000000; 
     margin-left:10px; 
     word-wrap: break-word; 
    } 

body 
    { 
     background-color: #ffffff; 
     color: #000000; 
     padding-top: 0; 
     padding-bottom: 0; 
     padding-right: 0; 
     padding-left: 0; 
     font-size: 80%; 
     font-family: "times"; 
     background-repeat:repeat; 
     word-wrap: break-word; 
    }

問：我需要從這些「尖角」，「毛邊」。怎麼樣？

例爲「羽/圓邊」：

http://forum.ubuntu-fr.org/viewtopic.php?id=175880
圖片：http://i.stack.imgur.com/vRm3t.png

來源

2011-06-14 LanceBaynes

使用div而不是table，然後使用CSS3的border-radius屬性：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body{ 
       background-color: #ffffff; 
       color: #000000; 
       padding:0; 
       font-size: 80%; 
       font-family: "Times"; 
       word-wrap: break-word; 
      } 
      div.tablet{ 
       width: 98%; 
       height:20px; 
       border: 1px solid #000000; 
       padding: 5px 10px; 
       font-size: 110%; 
       border-left: 5px solid #000000; 
       margin-left:10px; 
       -webkit-border-radius: 6px; 
       -moz-border-radius: 6px; 
       border-radius: 6px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="tablet">find . -type f -size 0</div> 
    </body> 
</html>

Live demo here.

請注意，border-radius僅在IE9，Safari 5.0，Firefox 4.0和Chrome 4.0或更高版本中受支持。較舊的瀏覽器將會看到一個方形框，而不是圓形框。如果這對您來說是個問題，您需要使用背景圖像創建圓角。如果該框的寬度可變，則需要創建兩個圓角背景圖像（一個用於左側和一個右側），然後使用sliding doors技術將它們應用於CSS。

來源

2011-06-14 11:09:59 Nick

哇，這個可以在firefox-3.6.17-1.fc14.i686下運行，但是它不能在google-chrome-stable-12.0.742.91-87961.i386上運行 – LanceBaynes 2011-06-14 11:21:26

在Chrome 12.0.742.91中正常運行我。 [[Screenshot。]（https://img.skitch.com/20110614-t95cnqw7b8fbdjciy4xpyb3n5r.jpg）] – Nick 2011-06-14 11:42:51

表中的羽毛邊角如何？

回答

相關問題