gpt4 book ai didi

css - 如何从 1 个 div 制作圆 Angular 可拉伸(stretch)内容框?查看示例图片

转载 作者:行者123 更新时间:2023-11-28 13:50:58 25 4
gpt4 key购买 nike

只有 1 <div>对于标题,我将使用 <h2>

alt text http://easycaptures.com/fs/uploaded/219/7750437937.jpg

HTML 代码是这样的。我只想向主 div 添加一个类或 id。

<div class="round">
<h2> heading text </h2>
<p> lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum</p>
<a href="#"> Link text</a>
</div>

任何 css 或 js 解决方案?记住我只想用一个<div>为框。我需要所有浏览器的兼容性。

最佳答案

简单的答案 - 完全跨浏览器兼容(我的意思是“在 Internet Explorer 中工作”)你不能用指定的标记限制来做到这一点(好吧,你可以,如果你使用 javascript 动态更改 DOM)。

如果你暂时忽略 IE(我发现这是最好的策略 - 你可以在之后使用 JS 添加对它的支持)你可以使用 CSS3's border-radius property它在 Webkit(Safari 和 Chrome)、Mozilla(Firefox 及其许多分支)和现在(终于)在 Opera 中有特定于供应商的实现。 .所以你的标记和 CSS 看起来像这样:

Markup
<div class="round">
<h2>Box Heading</h2>
<p>Box content etc.</p>
</div>

CSS
.round {
border-radius: 8px; /* or whatever radius you want */
-moz-border-radius: 8px; /* vendor specific for mozilla */
-webkit-border-radius: 8px; /* vendor specific for webkit browsers */
}

.round h2 {
background: orange url(heading_back.png) repeat-y 0 0; /* etc */
}

这些方面的一些东西应该适用于已经提到的最新版本的浏览器。剩下的就是 IE。就个人而言,我会就此打住,让 IE 用户使用他们自己的特殊方形世界观。但如果有必要支持它,我会使用 jQuery 插入一些额外的元素,然后您可以对其进行样式设置。在我的脑海中,这样的事情应该有效:

js with jQuery library
$('.round').prepend('<div class="tl"></div><div class="tr"></div>');
$('.round').append('<div class="bl"></div><div class="br"></div>');

然后您将拥有左上/右和左下/右 div,您可以将透明的 PNG Angular 图像应用到样式表中,以在 IE 中提供模拟圆 Angular 效果。这并不理想,但 IE 也不是。

css for IE
.round { position: relative; }
.tl, .tr, .bl, .br { height: 7px; width: 7px; position: relative;}
.tl { float: left; background: transparent url(ie_tl.png) no-repeat top left; }
.tr { float: right; background: transparent url(ie_tr.png) no-repeat top right; }
.bl { float: left; background: transparent url(ie_bl.png) no-repeat top left; }
.br { float: right; background: transparent url(ie_br.png) no-repeat top right; }

然后您可以使用 CSS 定位将这些背景图像放在正确的位置以形成圆 Angular 框的“Angular ”。

关于css - 如何从 1 个 div 制作圆 Angular 可拉伸(stretch)内容框?查看示例图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2087575/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com