【问题标题】:simple rounded borders with JQUERY or something else带有 JQUERY 或其他东西的简单圆角边框
【发布时间】:2009-06-02 13:21:26
【问题描述】:

重复:

你知道为 div 元素制作圆角边框的方法吗? 我使用了 ruzee,但在使用 CalenderExtender(asp.net ajax) 和 GMDatePicker 组件时遇到问题。

【问题讨论】:

    标签: css rounded-corners


    【解决方案1】:

    在 CSS 3 中会有一个标准。今天,您可以通过以下方式实现(仅适用于基于 Mozilla 和 Webkit 的浏览器):

    .roundBorder {
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
    }
    

    否则你可以使用带有背景图像的多个 div,但 JQuery 会提供更简单的方法(我不知道:()

    多重 div 方式可能如下所示:

    html:

    <div class="topLeft">
        <div class="topRight">
            <div class="bottomLeft">
                <div class="bottomRight">
                     <div class="content">
                     </div>
                </div>
            </div>
        </div>
    </div>
    

    css:

    .topLeft {
        background-image: url('topLeft.png');
        background-position: top left;
        background-repeat: no-repeat;
    }
    
    .topRight {
        background-image: url('topRight.png');
        background-position: top right;
        background-repeat: no-repeat;
    }
    
    .bottomLeft {
        background-image: url('bottomLeft.png');
        background-position: bottom left;
        background-repeat: no-repeat;
    }
    
    .bottomRight {
        background-image: url('bottomRight.png');
        background-position: bottom right;
        background-repeat: no-repeat;
    }
    

    【讨论】:

    • 你的问题是指什么?如果您询问 [...]-border-radius:由于这仅适用于 mozilla 或 webkit,因此不适用于 IE(不适用于 Opera)。如果您询问第二部分(堆叠的 div):这应该适用于每个常见的浏览器。
    【解决方案2】:

    您可以使用 CSS3 边框半径属性,但 IE 尚不支持此属性。

    【讨论】:

    • 好消息。你会添加 CSS3 的新特性吗?
    【解决方案3】:

    对于 JQuery,您可以使用“角落”。见here

    【讨论】:

    • 不知道为什么,注册不了(即使在页面中添加了js文件)
    猜你喜欢
    • 2012-04-12
    • 1970-01-01
    • 2012-11-12
    • 1970-01-01
    • 2013-10-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    相关资源
    最近更新 更多