css - Sencha Touch 2 圆形面板 : CSS newb

Question

我对 CSS 真的很陌生。事实上，我并没有真正理解这些概念，即使在阅读了 3 本书之后也是如此。我在这里试图实现的是使用 Sencha Touch 2.0.1 创建一些圆 Angular 面板。我有一个 Ext.Panel。我给它一个类名“PanelBio”，如下所示:

Ext.create('Ext.Panel', {
    id: 'panelBio02',
    styleHtmlContent: true,
    centered:true,
    cls: 'PanelBio',

    html: [
        '<h1>Lorem epsum.....</h1>'
    ].join("")
})

到目前为止一切顺利...然后，我在 SASS 文件中有一个类定义:

.PanelBio {
    -webkit-border-radius: 3em !important;
    border-radius: 3em !important;
    background-color: #333333;
    opacity: 0.8;
}

然而，当我运行代码时，它就是不工作。它嵌入了几层。首先是一个带有 Carousel 的面板，然后一个 item 就是一个包含这个面板的面板。因此，当我检查 Chrome 开发工具中的元素时，我得到如下信息:

<div class="x-container x-panel PanelBio x-floating" id="panelBio02" style="z-index: 4 !important; ">        
    <div class="x-inner x-panel-inner" id="ext-element-10">
        <div class="x-innerhtml  x-html" id="ext-element-12">
            <h1>Lorem epsum.....</h1>
        </div>
    </div>
    <div class="x-anchor" style="display: none; " id="ext-element-11">
    </div>
</div>

任何人都可以向我解释我该怎么做才能使这项工作成功吗？

Answer 1

您可以尝试将此添加到您的 PanelBio 类中的 css:

overflow: hidden;

如果这没有帮助，请将应用于元素的 css 类附加到您的帖子中，以便我们查看。