Question

我的头撞在HTML / CSS墙上。我试图将彩色标题放在带有圆角的DIV的顶部。标题背景从包含DIV的圆角的边界溢出。

我尝试将background-clip:padding-box应用于DIV和H1的样式都没有效果。我尝试将border-radius应用于H1，但是由于高度不同，拐角处的排列不会达到所需的效果。

有什么想法我在这里想念的吗？

<!DOCTYPE html>
<html>
  <head>
    <title>Rounded Edges With Background</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      .outer_box {
        width: 500px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 25px;
      }

      .title {
        width: 100%;
        background: #00f;
        color: #fff;
        margin-top:0;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <div class="outer_box">
      <h1 class="title">Here's a title</h1>
      <p>Here's some content.</p>
    </div>
  </body>
</html>

（也在fiddle中）

Answer 1

检查此代码，这是您要的吗？

overflow: hidden隐藏通过.outer_box边界的任何东西

和padding: 10px;只是为了使它看起来不错。

<!DOCTYPE html>
<html>
  <head>
    <title>Rounded Edges With Background</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      .outer_box {
        width: 500px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 25px;

        overflow: hidden;
      }

      .title {
        width: 100%;
        background: #00f;
        color: #fff;
        margin-top:0;
        background-clip: padding-box;
        
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="outer_box">
      <h1 class="title">Here's a title</h1>
      <p>Here's some content.</p>
    </div>
  </body>
</html>

Answer 2

您应该添加属性

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        wbMain.Navigated += new NavigatedEventHandler(wbMain_Navigated);
    }

    void wbMain_Navigated(object sender, NavigationEventArgs e)
    {
        SetSilent(wbMain, true); // make it silent
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        wbMain.Navigate(new Uri("... some url..."));
    }
}


public static void SetSilent(WebBrowser browser, bool silent)
{
    if (browser == null)
        throw new ArgumentNullException("browser");

    // get an IWebBrowser2 from the document
    IOleServiceProvider sp = browser.Document as IOleServiceProvider;
    if (sp != null)
    {
        Guid IID_IWebBrowserApp = new Guid("0002DF05-0000-0000-C000-000000000046");
        Guid IID_IWebBrowser2 = new Guid("D30C1661-CDAF-11d0-8A3E-00C04FC9E26E");

        object webBrowser;
        sp.QueryService(ref IID_IWebBrowserApp, ref IID_IWebBrowser2, out webBrowser);
        if (webBrowser != null)
        {
            webBrowser.GetType().InvokeMember("Silent", BindingFlags.Instance | BindingFlags.Public | BindingFlags.PutDispProperty, null, webBrowser, new object[] { silent });
        }
    }
}


[ComImport, Guid("6D5140C1-7436-11CE-8034-00AA006009FA"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
private interface IOleServiceProvider
{
  [PreserveSig]
  int QueryService([In] ref Guid guidService, [In] ref Guid riid, [MarshalAs(UnmanagedType.IDispatch)] out object ppvObject);
}

到external_box。基本上，它所做的是隐藏任何超出边界的内容。您还应该在标题上添加一些填充。

Answer 3

您必须在{ "key": "alt+z", // or watever you want "command": "workbench.action.tasks.runTask", "args": "Run 2 terminals with macro" },圆角边框内制作h1标签。

outer_box

带圆角出血的DIV内部背景元素

3 个答案: