我的头撞在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中)
答案 0 :(得分:2)
检查此代码,这是您要的吗?
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>
答案 1 :(得分:1)
您应该添加属性
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。基本上,它所做的是隐藏任何超出边界的内容。您还应该在标题上添加一些填充。
答案 2 :(得分:-1)
您必须在{
"key": "alt+z", // or watever you want
"command": "workbench.action.tasks.runTask",
"args": "Run 2 terminals with macro"
},
圆角边框内制作h1
标签。
outer_box