我有一个窄标题，采用公司颜色，亮红色，下面的内容位于纯白色背景上。我尝试使用具有中间背景的边框类型 div 柔化这些颜色相遇的长线，但我认为我需要原始类型的曲线渐变“区域过渡”。我想在这里减少红色和白色之间的对比度，使用红白色渐变，但使用“曲线”渐变，而不是线性渐变。
途中图片:
我可以从他们的网站上复制 1024 像素宽且(垂直方向)太窄的标题 gif，然后将其分割成八个边框图像，但这看起来很笨拙，我正在寻找可以在任何地方应用的东西，不需要图像。我可以在 x-y 平面上制作圆形边框，但我很好奇如何将渐变应用于任何选定的颜色过渡。
我在“#top-section”上方和下方用作边框元素的额外 div 是在我尝试为一个边框元素制作多个 div 时出现的。这似乎是边框操作的终极选择，无代码，但在 CSS 中进行规范并为每个带边框的元素布置新边框非常乏味。
HTML:
<div id="topsection">
<div style="float: right; width: 300px; padding-right: 5px;">
<div style="font-size: small; text-align: right;">
Provantage Media Management System</div>
<div style="font-size: x-small; text-align: right;">
<asp:LoginStatus ID="loginStatus" runat="server"
LoginText="Log in" LogoutText="Log out" />
</div>
</div>
<span style="padding-left: 15px;">Main Menu</span><span id="content-title">
<asp:ContentPlaceHolder ID="titlePlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</span>
<div style="background-color: white; height: 2px;">
</div>
<div style="background-color: white; height: 3px;"></div>
还有 CSS:
#topsection
{
background-color: #EB2728;
color: white;
height: 35px;
font-size: large;
font-weight: bold;
}
示例粗边框(图像未显示，可在 http://thehashtable.com/?attachment_id=58 获得):
最佳答案
如果不使用图像，您生成渐变的选项非常有限——您还不能以任何可靠的方式“通过编程模糊红色和白色之间的渐变边界，而不使用图像”，这将在以下集合中起作用您可能需要它的浏览器。
CSS-3 提供了渐变绘图功能，但只有最新的浏览器在某种程度上支持它们，我认为它们中的任何一个都不能为您提供 CSS-3 指定的全套选项。
对于跨浏览器更友好的解决方案，您可以使用 CSS 阴影伪造渐变，如下所示:http://www.spookandpuff.com/examples/fakeGradientFill.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fake gradient fill</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}
body {margin:2em;padding:0;}
#header,
#content {
background-color:#992916;
color:#FFF;
margin:0;
padding:1em;
}
#content .liner {
color:#222;
padding:1em;
background-color:#F4F4F4;
box-shadow:0 0 1.5em #F4F4F4;
-webkit-box-shadow:0 0 1.5em #F4F4F4;
-moz-box-shadow:0 0 1.5em #F4F4F4;
}
</style>
</head>
<body>
<div id="header">
<h1>Header content</h1>
</div>
<div id="content">
<div class="liner">
<h2>Body content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
这让您受制于浏览器的阴影绘制技术(在我测试过的任何浏览器中您都看不到平滑过渡)。 Firefox 3+、Safari 4+、Chrome 1+ 和一些较新版本的 Opera 支持此效果。
另一个选项，同样没有得到很好的支持，是使用 border-image:这允许您指定单个图像，然后浏览器根据您提供的坐标拉伸(stretch)、重复和定位。 Firefox 3.1+、Safari 4+ 和 Chrome 支持此功能。设置边框图像的示例有点复杂 - 相反，请查看:http://www.css3.info/preview/border-image/
因此 - 不幸的是，这意味着您可能需要使用图像，或将您的设计更改为更容易实现的设计。我还没有看到您的示例，但我认为这可能不值得麻烦!
祝你好运!
关于javascript - 以编程方式软化颜色边框，可能带有渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2786282/