使用CSS创建圆角[关闭]-Java 学习之路

242

如何使用CSS创建圆角？

21 回答

27
自从引入CSS3以来，使用CSS添加圆角的最佳方法是使用 border-radius 属性 . 您可以在酒店read the spec，或者获取一些useful implementation information on MDN：

如果您使用的是浏览器doesn't implement border-radius （Chrome pre-v4，Firefox pre-v4，IE8，Opera pre-v10.5，Safari pre-v5），那么下面的链接详细介绍了一大堆不同的方法 . 找到一个适合您的网站和编码风格，并与它一起使用 .
回复于 2024-05-06T02:29:33+08:00
0
我在Stack Overflow的创作中很早就看到了这一点，并且找不到任何创建圆角的方法，这些方法并没有让我觉得我只是走过了下水道 .

CSS3 does finally define
```
border-radius:
```
这正是你想要它的工作方式 . 虽然这在最新版本的Safari和Firefox中运行正常，但在IE7中完全没有（我不认为在IE8中）或Opera .

与此同时，它一直是黑客攻击 . 我很想听听其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上最干净的方法 .
回复于 2024-05-06T02:29:33+08:00
-1
我通常只用css得到圆角，如果浏览器不支持他们看到带有扁平角落的内容 . 如果圆角对您的网站不是那么重要，您可以使用下面的这些行 .

如果你想使用半径相同的所有角落，这是一个简单的方法：
```
.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}
```
但如果你想控制每一个角落，这是好的：
```
.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}
```
正如你在每个集合中看到的那样，你有浏览器特定的样式，在第四行我们以标准的方式声明，我们假设将来其他人（希望IE也是）决定实现这个功能，让我们的风格也为他们做好准备 .

正如在其他答案中所说，这在Firefox，Safari，Camino，Chrome上运行得非常好 .
回复于 2024-05-06T02:29:33+08:00
2

如果你有兴趣在IE中创建角落，那么这可能是有用的 - http://css3pie.com/

回复于 2024-05-06T02:29:33+08:00
5

我建议使用背景图片 . 其他方式并不是那么好：没有抗锯齿和无意义的标记 . 这不是使用JavaScript的地方 .

回复于 2024-05-06T02:29:33+08:00
5
正如Brajeshwar所说：使用 border-radius css3选择器 . 到目前为止，您可以分别为基于Mozilla和Webkit的浏览器应用 -moz-border-radius 和 -webkit-border-radius .

那么，Internet Explorer会发生什么？ Microsoft有许多行为可以使Internet Explorer具有一些额外的功能并获得更多技能 .

这里： .htc 行为文件从CSS中的 border-radius 值获取 round-corners . 例如 .
```
div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}
```
当然，行为选择器不是有效的选择器，但您可以将其放在具有条件注释的不同css文件中（仅适用于IE） .

behavior HTC file
回复于 2024-05-06T02:29:33+08:00

由于支持在较新版本的Firefox，Safari和Chrome中实现CSS3，因此查看“Border Radius”也会很有帮助 .

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

像任何其他CSS简写一样，上面也可以用扩展格式编写，从而实现不同的边界半径，用于顶部，顶部等 .

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

回复于 2024-05-06T02:29:33+08:00

1

jQuery是我亲自处理这个问题的方式 . css支持很少，图像太繁琐，能够选择你想要在jQuery中拥有圆角的元素对我来说是完全合理的，尽管有些人无疑会争辩 . 这是我最近用于工作项目的插件：http://plugins.jquery.com/project/jquery-roundcorners-canvas

回复于 2024-05-06T02:29:33+08:00

总是采用JavaScript方式（参见其他答案），但由于它纯粹是样式，我反对使用客户端脚本来实现这一目标 .

我喜欢的方式（尽管它有其局限性）是使用4个圆角图像，你将使用CSS定位在盒子的4个角落：

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

如上所述，它有其局限性（圆形框背后的背景应该是平坦的，否则角落将与背景不匹配），但它对其他任何东西都非常有效 .

Updated: 使用精灵表改进了实现 .

回复于 2024-05-06T02:29:33+08:00

16

我个人最喜欢这个解决方案，它是一个允许IE呈现弯曲边框的.htc .

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

回复于 2024-05-06T02:29:33+08:00
2
在Safari，Chrome，Firefox> 2，IE> 8和Konquerer（可能还有其他）中，您可以使用 border-radius 属性在CSS中执行此操作 . 由于它还不是规范的正式部分，请使用供应商特定的前缀...

示例
```
#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
```
JavaScript解决方案通常会添加一堆小 div 来使其看起来圆润，或者它们使用边框和负边距来制作1px缺角 . 有些人也可能在IE中使用SVG .

IMO，CSS方式更好，因为它很容易，并且会在不支持它的浏览器中优雅地降级 . 当然，这只是客户端不在非支持的浏览器（如IE <9）中强制执行它们的情况 .
回复于 2024-05-06T02:29:33+08:00

这是我最近做的HTML / js / css解决方案 . IE中的绝对定位有1px舍入误差，因此您希望容器的宽度为偶数像素，但它非常干净 .

HTML：

<div class="s">Content</div>

jQuery的：

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS：

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

图像宽度仅为18px，并且所有4个角都装在一起 . 看起来像一个圆圈 .

注意：您不需要第二个内部包装器，但我喜欢在内部包装器上使用margin，这样段落和 Headers 上的边距仍然会保持边缘崩溃 . 您也可以跳过jquery并将内包装器放在html中 .

回复于 2024-05-06T02:29:33+08:00

3

作为圆角工作的复杂程度的指示，即使是Yahoo discourages them（见第一个项目符号）！当然，他们很有意思地看到，即使是一家拥有专业知识的公司也认为他们在大多数情况下都是太痛苦了.1165575 .

如果您的设计能够在没有它们的情况下生存，那么这是最简单的解决方案

回复于 2024-05-06T02:29:33+08:00
1

当然，如果它是一个固定的宽度，使用CSS非常容易，而且一点都不令人反感或费力 . 当你需要它向两个方向扩展时，事情变得不稳定 . 一些解决方案将大量的div堆叠在一起以实现它 .

我的解决方案是向设计师指示如果他们想要使用圆角（暂时），则需要固定宽度 . 设计师喜欢圆角（我也是如此），所以我发现这是一个合理的妥协 .

回复于 2024-05-06T02:29:33+08:00
11

Ruzee Borders是唯一一款基于Javascript的抗锯齿圆角解决方案，我发现它适用于所有主流浏览器（Firefox 2/3，Chrome，Safari 3，IE6 / 7/8），并且也是唯一可以同时运行的解决方案圆角元素和父元素包含背景图像 . 它还可以做边框，阴影和发光 .

较新的RUZEE.ShadedBorder是另一种选择，但它缺乏从CSS获取样式信息的支持 .

回复于 2024-05-06T02:29:33+08:00
97

如果你想使用border-radius解决方案，有一个很棒的网站可以生成css，使其适用于safari / chrome / FF .

无论如何，我认为你的设计不应该依赖于圆角，如果你看看Twitter，他们只会对IE和歌剧用户说F **** . 圆角是一个很好的，我个人可以保持这个为不使用IE浏览器的酷用户:) .

当然，这不是客户的意见 . 这是链接：http://border-radius.com/

回复于 2024-05-06T02:29:33+08:00
80

为了增加上面提到的htc解决方案，这里是达到rounded corners in IE的另一个解决方案和示例 .

回复于 2024-05-06T02:29:33+08:00
13

没有“最好的”方式;有些方法适合你，有些方法不适合你 . 话虽如此，我发布了一篇关于创建基于CSS图像的流体圆角技术的文章：

Box with Round Corners Using CSS and Images - Part 2

这个技巧的概述是使用嵌套的DIV和背景图像重复和定位 . 对于固定宽度布局（固定宽度可拉伸高度），您需要三个DIV和三个图像 . 对于流体宽度布局（可拉伸的宽度和高度），您需要9个DIV和9个图像 . 有些人可能会认为它过于复杂，但恕我直言，这是有史以来最好的解没有黑客，没有JavaScript .

回复于 2024-05-06T02:29:33+08:00

我前一段时间写了一篇博客文章，所以欲了解更多信息，see here

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

它运作得很好 . 不需要Javascript，只需要CSS和HTML . 最小的HTML干扰其他东西 . 它与Mono发布的内容非常相似，但不包含任何IE 6特定的黑客攻击，并且在检查后，似乎根本不起作用 . 另外，另一个技巧是使每个角落图像的内部部分透明，这样它就不会阻挡角落附近的文本 . 外部部分不得透明，以便它可以掩盖非圆形div的边界 .

此外，一旦CSS3被border-radius广泛支持，这将是制作圆角的官方最佳方式 .

回复于 2024-05-06T02:29:33+08:00

5

不要使用CSS，jQuery已被多次提及 . 如果您需要完全控制元素的背景和边框，请尝试_1165583 . 它在背景中放置一个HTML5 Canvas元素，允许你绘制你想要的每个背景或边框 . 圆角，渐变等 .

回复于 2024-05-06T02:29:33+08:00
8

Opera还不支持border-radius（显然它将在发布之后版本10） . 在此期间，你可以use CSS to set an SVG background to create a similar effect .

回复于 2024-05-06T02:29:33+08:00

使用CSS创建圆角[关闭]

21 回答

示例

相关问题