Question

我曾经使用过这种“记录**”格式，只是一个例子：

<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 /等。的howtos。

的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

Answer 1

使用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.

请注意，只有IE9，Safari 5.0，Firefox 4.0和Chrome 4.0或更高版本支持border-radius。较旧的浏览器将看到方框而不是圆形框。如果这对您来说是个问题，则需要使用背景图像创建圆角。如果框具有可变宽度，则需要创建两个圆形背景图像（一个用于左侧，一个用于右侧），然后使用sliding doors技术将其应用于CSS。

表中的羽毛角落怎么样？

1 个答案: