为我的内容添加 CSS 边框、阴影和圆角的最简单方法答案

【问题标题】：Easiest way to add a CSS border, dropshadow, and rounded corners for my content为我的内容添加 CSS 边框、阴影和圆角的最简单方法
【发布时间】：2011-04-01 07:29:18
【问题描述】：

好的，我的网站在这里运行良好：http://www.marioplanet.com

但我已经意识到，如果最终用户的显示器足够大，可以在页面两侧显示动画（大多数台式机显示器和一些笔记本电脑都可以），我相信我的主要内容会更好看小红/黑边框，以及一些圆角，甚至可能还有阴影。

现在，我正在寻找最简单的方法来实现边框和圆角，并希望实现投影，但这不是必需的，而且代码量最少。

如果我可以让它在除了 IE 之外的大多数浏览器中只使用 CSS 并回退到 IE 的 jQuery / JS 插件，那也很棒。或者甚至将其完全排除在 IE 之外，但这不太好！ :)

更新：

好的，我可以将它应用到我的标题 <div>，正如你现在可以看到的那样，但是当我尝试将它应用到整个包装器 <div> 时，我什么也得不到。可能是因为我需要先在我的 CSS 中指定 width 和 height 属性。

谢谢！

更新更新：

我发现制作边框最简单的方法是使用以下 CSS3 选择器：

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

这一切都像一个魅力！

【问题讨论】：

标签： html css border rounding rounded-corners

【解决方案1】：

CSS3 可以满足你的所有需求，大多数浏览器都支持它，除了 IE8。（不过，下一版本的 Internet Explorer 将支持这些功能。）

访问css3.info了解更多信息。

【讨论】：

【解决方案2】：

更新

我最近开始使用http://css3please.com/。它同样很棒！

看看这个：http://css3pie.com/

PIE 使 Internet Explorer 6-8 能够呈现几个最有用的 CSS3 装饰功能。

它易于使用和集成，它允许您使用 CSS3 功能，如边框半径、阴影、渐变背景等……最重要的是……它与 IE 兼容！

我希望这会有所帮助！

【讨论】：

不客气 :) 这是否意味着这回答了您的问题？如果是这样，请检查我的答案:)

【解决方案3】：

jquery corner 插件是最好的创建圆角的插件，而Dropshadow 是一个很好的阴影效果。它的字面意思是两行代码（忽略插件代码）:)

【讨论】：

既然 CSS 可以胜任，为什么还要使用 JS？当然 IE 做不到，但 Lynx 也做不到，也没有人为此出汗。很多时候，每个人都只是在每个简单的解决方案中抛出 jQuery。
嗯，我认为 jQuery 仍然可以用作后备，不是吗？除了，感谢 Hristo 指出 PIE，我可以使用它！ :)
@Rob 在问题中，他明确要求使用 jQuery 插件作为后备。如果浏览器有能力，我建议的插件将使用 css3，否则使用 div 来完成这项工作。 jQuery 也让事情变得简单。

【解决方案4】：

http://www.cssplay.co.uk/boxes/four_cornered.html

http://www.cssplay.co.uk/boxes/ 具有圆角、阴影等。 100% CSS，不使用 JS，可在 IE 中运行。

【讨论】：