～技术宅真可怕～ » 讨论
CSS的圆角效果

#1 - 2010-6-24 10:28

Venusxx (xxsuneV)

-moz-border-radius: 20px 20px 20px 20px;

用上述的CSS代码实现圆角，但是只在Gecko内核的浏览器（Firefox）上能有效，在WebKit内核的浏览器（Safari、Chrome）上无效，是不是这些浏览器对CSS的解析有区别？请问在CSS里该如何写才能在FF、Safari和Chrome都实现圆角的效果呢？

在FF的效果图如下：

小博地址：http://venusxx.gzocean.net/

#2 - 2010-6-24 10:40

滾滾洗衣君

去moz-，直接用border-radius

#2-1 - 2010-6-24 10:43

HHAribai

去moz+1

#3 - 2010-6-24 10:42

void**** (加班时在做什么？有没有空？可以补番吗？ ...)

于是推下css3的手册：http://isd.tencent.com/css3/

#3-1 - 2010-6-24 11:09

Tr.

马克

#3-2 - 2010-6-24 12:26

mua

马（赛）克图

#4 - 2010-6-24 10:56

Venusxx (xxsuneV)

谢谢各位的解答=w=

#5 - 2010-6-24 11:09

Venusxx (xxsuneV)

不过去掉moz-之后，就只在chrome能显示圆角，FF 3和Safari 4都不显示了

#5-1 - 2010-6-24 11:43

滾滾洗衣君

這就是不遵守標準的杯具

#5-2 - 2010-6-25 17:46

Link/Zero

两个都写就好了.

#6 - 2010-6-24 11:20

Venusxx (xxsuneV)

border-radius
-moz-border-radius
-webkit-border-radius

嗯，把这三个代码都加进去，不同内核的浏览器就会选择适合的来解析了。

#7 - 2010-6-24 11:26

_(・ω・｣ DSM∠)_ (灯光太昏暗遍寻不着蓝色的小格子)

IE678下还是无效的-v-

#7-1 - 2010-6-24 11:28

Venusxx

IE不支持border-radius的CSS3，其实IE对大部分的CSS3都不支持……
我现在做板子基本放弃对IE的支持了……只要不错位就好。

#7-2 - 2010-6-24 12:09

夢遊中

Venusxx 说: IE不支持border-radius的CSS3，其实IE对大部分的CSS3都不支持……
我现在做板子基本放弃对IE的支持了……只要不错位就好。

+1. IE去死吧。

#7-3 - 2010-6-24 19:11

我不存在

Y酱说: +1. IE去死吧。

IE这种东西..三年使用时间应该没超过一天吧

#8 - 2010-6-24 11:49

Ariagle (继续潜水)

顶部导航栏也是圆角的话就更好看了

#8-1 - 2010-6-24 12:37

Venusxx

你是说“首页、关于”那里？

#8-2 - 2010-6-24 17:03

Ariagle

Venusxx 说: 你是说“首页、关于”那里？

是的，顶部的导航链接。

#9 - 2010-6-24 12:27

mua

打开你blog地址，看到title，我就想起了“求交往”...

#9-1 - 2010-6-25 18:07

Venusxx

你们别这样=w=

#10 - 2010-6-24 12:29

Lancee (行って　人間の生きざまに触れてこい )

.box{
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   -khtml-border-radius: 9px;
   border-radius: 9px;
}
这是目前最全兼容，最早在07年某大牛的博客上出现（记性好差…Orz）

#10-1 - 2010-6-24 12:34

_(・ω・｣ DSM∠)_

-khtml-border-radius据说是无效的？

#10-2 - 2010-6-24 12:46

Lancee

dsm 说: -khtml-border-radius据说是无效的？

“ -khtml-border-radius works on both WebKit and KHTML but -webkit-border-radius only works on WebKit. ”

#11 - 2010-6-24 12:33

我真的不是管理员 (这四年当我瞎狗眼)

http://blog.orzotl.com/1/viewspace-3872.html Sai妹的小课堂

#11-1 - 2010-6-24 12:46

Lancee

Sai 的遮罩，这招广泛用于hoto
PS:hoto的UI现在有点俗了…

#11-2 - 2010-6-24 13:03

Venusxx

遮罩太麻烦了，而且还要再load图片，不够轻便。

#11-3 - 2010-6-24 14:14

Sai🖖

lancee 说: Sai 的遮罩，这招广泛用于hoto
PS:hoto的UI现在有点俗了…

这个只适用定宽高的，其实图片圆角最妙的方法是div+background-image

#11-4 - 2010-6-24 15:23

Lancee

Sai 说: 这个只适用定宽高的，其实图片圆角最妙的方法是div+background-image

另一种遮罩而且减少一个http请求（解说你好）

#11-5 - 2010-6-24 15:40

Venusxx

lancee 说: 另一种遮罩而且减少一个http请求（解说你好）

求详细。

#11-6 - 2010-6-24 15:57

Lancee

Venusxx 说: 求详细。

div .box {
background: url(…) no-repeat;
-webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      width: …;
      height: …;
      margin: 0;
}
如此长宽根据需要调节～

#11-7 - 2010-6-24 16:35

Sai🖖

lancee 说: 另一种遮罩而且减少一个http请求（解说你好）

不不……是这样的：
div .avatar {
      background: no-repeat;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      width: …;
      height: …;
      margin: 0;
}

<div class="avatar" style="background-image:url('/pic/user/s/000/00/07/788.jpg')"></div>

这个只是针对我hoto圆角头像的改进。

ps.hoto五月份以后的改版与我无关

#11-8 - 2010-6-24 16:45

Lancee

Sai 说: ……
ps.hoto五月份以后的改版与我无关

了解，有关就不会这么俗了囧；
恩，背景单独分配

#12 - 2010-6-24 16:36

Sai🖖 (Awesome!)

另外DD有另一个插件可以让IE支持圆角
http://dillerdesign.com/experiment/DD_roundies/

#12-1 - 2010-6-24 16:52

Venusxx

算了……还要在站上再弄个插件 - -

#13 - 2010-6-24 16:44

Venusxx (xxsuneV)

搭车问了……

貌似透明不了……

#13-1 - 2010-6-24 16:57

Lancee

请用力刷新

#13-2 - 2010-6-24 17:06

Venusxx

lancee 说: 请用力刷新

清楚缓存之后用力刷新还是老样子，在firebug里面把transparent属性去掉，也看不出变化- -

呜哇~我还是比较适合求交往~

#13-3 - 2010-6-24 17:11

Lancee

Venusxx 说: 清楚缓存之后用力刷新还是老样子，在firebug里面把transparent属性去掉，也看不出变化- -

呜哇~我还是比较适合求交往~

咱在V君的交往博里看到已经透明了～

#14 - 2010-6-24 16:51

粘土火星 (Save you from anything)

说到PNG，当年不知道有DD，直接IE滤镜搞上去www

#14-1 - 2010-6-24 21:45

星野恵瑠

当年直接alpha半透明的png文件搞上去，于是IE用户表示狗眼瞎了233

#14-2 - 2010-6-25 18:01

粘土火星

IE可以通过滤镜搞出透明，只不过要多一步，但是更2的是当年所有的其他浏览器宣传语潜台词都是说：这东西IE根本不可能做到，快来用我们的浏览器⋯⋯最典型的就是Opera，另外还有FF的病毒式推广，让人非常反感。。

#15 - 2010-6-24 19:11

我不存在

仰望html帝~

#16 - 2010-6-29 13:32

fmfsaisai

<!DOCTYPE html>
<html lang="zh">
  <meta charset="utf-8">
  <title>Google</title>
  <style>
html { margin: 0 1em; }
body { font: .8125em/1.5 arial, sans-serif; text-align: center; }
h1 { font-size: 1.5em; font-weight: normal; margin: 1em 0 0; }
p#footer { color: #767676; font-size: .77em; }
div { -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #ccc; border-radius: 20px; margin: 2em auto 1em; max-width: 650px; min-width: 544px; }
div:hover { border-color: #999; }
div:hover, div:hover * { cursor: pointer; }
div p { margin: .5em 0 1.5em; }
img { border: 0; }
  </style>
  <div>
<a href="http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp"><img src="http://www.google.cn/landing/cnexp/google-search.png" alt="Google"></a>
<h1>我们已移至<a href="http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp"><strong>google.com.hk</strong></a></h1>

<p>请收藏我们的新网址
  </div>
  <p id="footer">© 2010
  <script>
var gcn=gcn||{};gcn.redirectIfLocationHasQueryParams=function(){var loc=window.location.search;if(loc){window.location='http://www.google.com.hk/search'+loc}}();gcn.listen=function(el,e,func){if(el.addEventListener){el.addEventListener(e,func,false)}else if(el.attachEvent){var r=el.attachEvent('on'+e,func);return r}};gcn.stopDefaultAndProp=function(e){if(e&&e.preventDefault){e.preventDefault()}else if(window.event&&window.event.returnValue){window.eventReturnValue=false;return false}if(e&&e.stopPropagation){e.stopPropagation()}else if(window.event&&window.event.cancelBubble){window.event.cancelBubble=true;return false}};gcn.resetChildElements=function(el){var children=el.childNodes;for(var i=0,len=children.length;i<len;i++){gcn.listen(children[ i ],'click',gcn.stopDefaultAndProp)}};gcn.redirect=function(){window.location='http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp'};
gcn.listen(document, 'click', gcn.redirect);
  </script>

google.cn目前的新界面。。。留念一下。。

#16-1 - 2010-6-30 15:33

mua

我恰好也是刚看到g.cn的圆角，计划来这个话题里发那个代码的。

view-source:http://www.google.cn/

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

之后搜到这个：
http://www.css88.com/tool/css3Preview/Border-Radius.html

/ 返回～技术宅真可怕～小组

～技术宅真可怕～ » 讨论CSS的圆角效果

～技术宅真可怕～ » 讨论
CSS的圆角效果