个人中心
gpt4 book ai didi

css - 表格中的羽毛边 Angular 如何？

转载 作者：太空宇宙 更新时间：2023-11-04 16:22:20 25 4
gpt4 key购买 nike

我曾经使用过这种“记录**”的格式，举个例子:

<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/etc.指南。

样式.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;
    }

问:我需要用这些“尖 Angular ”制作“羽毛边”。怎么办？

“羽毛/圆边”示例:

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

最佳答案

使用 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 或更高版本中受支持。较旧的浏览器将看到一个方形框而不是圆形框。如果这对您来说是个问题，您需要使用背景图像创建圆 Angular 。如果框的宽度可变，则需要创建两张圆形背景图像(一张用于左侧，一张用于右侧)，然后使用 sliding doors 通过 CSS 应用它们。技术。

关于css - 表格中的羽毛边 Angular 如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6342916/

25 4 0
文章推荐： css - flex 的底 Angular 朝外，就像在 Office 功能区选项卡中一样，使用 CSS
文章推荐： javascript - 使用JSON数据时，如何在Google Charts中制作工具提示html？
文章推荐： c++ - 如何将 vector::iterator(在堆上)转换为 shared_ptr
文章推荐： javascript - 每个浏览器 session 运行一次脚本，但在结束时卡住脚本
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com