Rounded Corners with CSS and JavaScript

＆nbsp; 内容进入这里＆nbsp;

几年前，这将是一个可以接受的解决方案。如今，这是一个丑陋的技巧：对于相对不重要的视觉装饰来说，这是一个糟糕的冗余标记。实际上，上述代码甚至在使用严格的Doctype提供的文档中都无法正常运行 - 由于图像是内联元素，因此在“ y'和'j”等字母上的“尾巴”的图像下，将出现在角落图像下方的小差距。如埃里克·迈耶（Eric Meyer）在图像，表和神秘差距中所解释的那样，该解决方案是将以下规则添加到您的样式表中：

td img { display: block; }

登录后复制

这会产生所需的结果，如下所示。

>但是，现在我们正在使用CSS hacks修复丑陋的桌子黑客！让我们看一下仅使用CSS实现相同效果的方法。

作为一般规则，任何装饰映像都应在现有页面元素上作为CSS背景图像实现，而不是使用带有CSS和JavaScript的圆角

tag将其列入页面。很容易确定图像是装饰性还是包含实际内容：问问自己是否缺少图像会对页面的整体内容产生任何影响。在圆角的情况下，答案显然不是。

> CSS背景图像非常有力。您只需要查看CSS Zen Garden上展出的许多精彩设计，以证明这一点。使用CSS，可以将背景图像应用于页面上的任何元素。此外，它可以水平，垂直或根本不重复；它可以使用绝对测量值将其放置在图像的背景区域内，也可以相对于四个角落之一。甚至可以在元素的内容卷轴上保持固定位置。不幸的是，CSS 2施加了一个小而显着的限制：您只能在页面上的每个元素上应用一个背景图像。要正确渲染

上的圆角，我们需要应用四个背景图像，一个在每个角落。

固定宽度框

如果我们要应用装饰角的盒子的宽度已固定，则已经解决了一半的问题。如果我们知道盒子始终是200像素宽，而不是创建四个背景图像（一个用于每个角落），我们可以创建两个：一个：一个用于框的顶部，一个用于底部。现在，挑战减少为将两个背景图像应用于我们的

。是时候利用我们的标记了。> 如果不包含任何内容，那么一个带有圆角的盒子就不会很有趣。考虑以下内容：

td img { display: block; }

登录后复制

非常简单，是吗？盒子的标题以

的形式生存（我假设

和

已经在页面的层次结构上进一步使用），随后的内容是段落和无序列表。解决我们的两个背景问题的关键在于

，它位于盒子的顶部。我们要做的就是将背景图像应用于

的顶部，而将背景图像应用于包含的

的底部，并且效果已完成：

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

登录后复制

单击此处查看结果。

结构良好的文档通常充满了类似的钩子，可以仔细利用这些钩子以应用多个背景并实现特定的视觉效果。学习识别它们是与CSS合作的重要组成部分。

嵌套元素

>将四个背景应用于一个Div仍然是我们无法触及的。但是，如果我们嵌套了四个div，一个针对每个背景怎么办？这样做可以解决我们的问题，但以额外的标记为代价而没有结构性价值：

，在CSS中：

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

登录后复制

代码显示如下所示。

>应该很清楚这里发生了什么。四个div中的每一个分别分别位于右上角，左上，右下和底部左侧的圆角背景图像。虽然包含DIV的宽度设置为200px，但它可以很容易地将其设置为更灵活的液体设计 - 无论corlers div的大小或小的大小。

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

登录后复制

>我们现在可以解决该问题，该问题的标记比原始表示例要少得多。但是，它仍然并不完美：它使用了三个额外的divs，这对整体文档结构没有任何价值。我们可以做得更好吗？是时候看javaScript了。

使用DOM

使用JavaScript和DOM，可以在浏览器加载文档后操纵文档的结构。圆角是一种呈现效果，可以从非JavaScript用户代理中隐藏起来，而不会显着降低其网站的整体经验，因此使用JavaScript进行这种转换没有道德问题。我们的最终解决方案将在源文档中只需要一个

。我们将使用JavaScript动态地添加圆角效果所需的三个外部div。这是标记：

td img { display: block; }

登录后复制

>我认为您会同意，除了在结构上可以更好地定义为段落的内容，我们不可能做的要比这更简单的事情，除非

将

交换为

。使此开关作为读者的练习。

现在是JavaScript：

脚本分为两个逻辑部分。第一部分在文档中的所有

元素上迭代，构建一个在其类属性中包含“圆形”的数组（请记住，请记住，元素可以具有由空格分隔的多个类）。脚本的第二部分依次通过这些元素，创建了另外三个divs并将其包裹在原始元素上。让我们更详细地看一下代码：>

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

登录后复制

>在这里，我们完全从原始

中删除了“圆形”的类。 CSS的原因将变得清晰。本质上，我们不希望使用原始样式来影响该元素。>

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

登录后复制

我们已经创建了最外部

，该

将用于应用最高右侧的背景图像以及盒子的整体宽度。请注意，我们将课程设置为“ Rounded2”；这将在我们的CSS中定义，与向非JavaScript客户提供的“圆形”类有细微的差异。>

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

登录后复制

> W3C DOM不提供直接的方法，可以用另一个节点替换文档中的节点。取而代之的是，您必须使用节点的替换方法（）方法来替换另一个节点的孩子。替换您要查看的节点的一个有用技巧是使用parenthnode属性访问自己的父，然后使用 /#c#.replacechild将其交换为其他东西。如果那对您没有意义，请不要担心 - 只想将上述行替换为我们刚刚创建的新tr节点替换我们的原始节点。

div.rounded { 
  width: 200px; 
  background: #1b5151 url(tr.gif) no-repeat top right; 
} 
div.rounded div { 
  background: transparent url(tl.gif) no-repeat top left; 
} 
div.rounded div div { 
  background: transparent url(br.gif) no-repeat bottom right; 
} 
div.rounded div div div { 
  background: transparent url(bl.gif) no-repeat bottom left; 
  padding: 15px; 
}

登录后复制

>现在，我们创建了三个新的

元素，并将它们插入文档中。剩下的就是重新插入我们的原始节点，其中包含其内容：>

td img { display: block; }

登录后复制

在这一点上，我们的实际文档树几乎与上面的四个嵌套

示例相同，唯一的区别是外部元素具有“ rounded2”类，而不是“圆形”。这是CSS：

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

登录后复制

这是结果。

对于Div.Rounded，仅在不执行JavaScript的浏览器中使用了第一组规则。请注意，宽度为170px和填充15px，总宽度为200px（宽度以及左右填充）。如果您需要在IE 5/Windows中使用，该Windows以不同的方式解释填充值，则需要应用臭名昭著的框模型黑客。您已经在上一个示例中看到了第二组规则。

向前看

上述技术将在所有现代浏览器以及支持CSS2和DOM 2标准的所有未来浏览器中起作用。 CSS 3引入了许多新方法来实现此效果，这将使上述技术过时。除了本地圆角支撑（在Mozilla的浏览器家族中已经可用）CSS具有功能强大的::外部伪元素，它允许以类似于本文显示的JavaScript示例的方式插入其他样式元素。如果这还不够，边界图像将允许您想想的几乎所有边界装饰。>

不幸的是，CSS 3支持可获得的几年。在此之前，JavaScript具有占用一些松弛的能力。

经常询问有关CSS和JavaScript圆角的问题（常见问题解答）

>如何使用CSS创建圆角？您可以使用“ Border-Radius”属性来实现这一目标。 “边境 - 拉迪乌斯”属性可以具有一个，两个，三个或四个值。单个值将对所有四个角都施加相同的半径。两个值将在左上角和右下角施加第一个半径，第二个半径是右上角和左下角的第二个半径。三个值将把第一个半径应用于左上角，第二个半径将其应用于右上和左下，第三个半径是右上方的。四个值将以左上角，右上角，右下，左下角的顺序应用不同的半径。

>我可以使用JavaScript？

>是的，您可以使用JavaScript创建圆角，尽管为此目的使用CSS更常见。如果您需要根据用户输入或其他因素动态创建圆角，那么JavaScript可能是更好的选择。您可以使用“ CanvasRenderingContext2D.RoudeRect（）”方法来绘制画布上带有圆角的矩形。该方法采用五个参数：矩形上左上角的X和Y坐标，矩形的宽度和高度以及角落的半径。

>如何使用CSS？

如何创建一个圆圈，用CSS创建一个圆形的圆圈，是创建圆形圆顶的特殊情况。如果将“ Border-Radius”属性设置为50％，则角落将足够圆形以形成一个圆圈。该元素还需要具有相等的宽度和高度。例如：

> div {

宽度：100px;

身高：100px;

border-radius：50％;

} } }
>
这将创建一个是一个完美的圆圈。通过指定“ Border-Radius”属性的不同值来元素。例如，要仅绕div的左上角和顶部右上角，您将使用：
div {
border-radius：10px 10px 0 0;
} }
}

角落。

如何用圆角创建边框？

>用圆角创建边框就像创建一个用圆角创建元素一样容易。您只需将“ Border-Radius”属性应用于带边框的元素即可。例如：

> div {
边界：1px固体黑色;
border-radius：10px;
}

}

>
> >>
>>
>>
与1px黑色边界和圆角创建一个div，并用10px Radius。通过指定“ Border-Radius”属性的不同值，在同一元素上具有不同的半径的角落。例如，要在左上角创建一个具有10px半径的DIV，右上角和左下角的20px半径为20px半径，在右下角的拐角处有30px半径，您将使用：

div {

{
{
{
border-radius：10px 20px 20px 20px 30px 30px; CSS？

是的，您可以通过指定“ Border-Radius”属性中每个角的两个值来创建CSS的椭圆角。第一个值是水平半径，第二个值是垂直半径。例如： div { border-radius：10px 20px;} > 这将创建一个带有椭圆角的div，水平半径为10px，垂直半径为20px。

我可以对“ Border-radius”属性进行动画吗？例如，要在2秒内逐渐将边界半径从0更改为5％，您可以使用：

div {
border-radius：0;
过渡：border-radius 2s;
}
}
}

div：当您悬停在它上时变成圆形，并且更改将在2秒内逐渐发生。

我可以使用百分比作为“ Border-radius”属性吗？该百分比相对于元素的相应维度。例如，如果您将“边界 - 拉迪乌斯”设置为50％，角落将被足够圆形以形成一个圆圈（或椭圆形，如果元素的宽度和高度不相等）。

>我可以在图像上创建圆角吗？

是的，是的，您可以在图像上创建圆角，通过将图像涂在“ border-Border-element the'Border-element to of the'border-element of the'border-element of the'border-element to the''属性上。对于缩略图或个人资料图片，这可能是一个很好的效果。例如：

img {
border-radius：10px;
}

>这将在所有图像的角度上应用10px半径。

以上是带有CSS和JavaScript的圆角的详细内容。更多信息请关注PHP中文网其他相关文章！