边界半径在opera浏览器-11.1中不能工作

时间:2022-09-10 19:14:27

i am writing an application using html,css and javascript. i have set border radius of button to have rounded corner but which is not working in opera browser. but same i have tested in chrome it works. please do give some suggestion or help on this. here is demo

我正在用html、css和javascript编写一个应用程序。我将按钮的边框半径设置为圆角,但在opera浏览器中不能使用。但同样的,我在chrome上测试过它。请在这方面给予一些建议或帮助。这是演示

6 个解决方案

#1


3  

Rounded Corner or all browser you want to use folloing method

圆角或所有浏览器都要使用折叠方法

#divId{
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
}

Its work for me perfectly.

这对我来说是完美的。

#2


1  

Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.

不幸的是,Border-radius css样式并不完全支持跨浏览器。Opera是一个不提供支持的浏览器。

See: http://www.westciv.com/iphonetests/

参见:http://www.westciv.com/iphonetests/

#3


1  

First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).

首先,你试过-o-border-radius吗?第二,你试过普通的分区吗?有时表单元素拒绝某些样式。否则它就不支持(opera10没有)。

#4


0  

Border radius in Opera with other demos related to Opera.

Opera的边界半径与其他与Opera相关的演示。

button {
 background:#000;   
 color:#fff;
 border-radius: 15px;  
}

#5


0  

In Opera you can use this:

在Opera中,你可以这样使用:

.className {
  -o-border-radius: 3px;
}

#6


0  

I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution. Just recreate behavior of the button with following style:

我遇到了同样的问题,发现虽然Opera支持边界半径,但是它不能很好地使用按钮。但我设法使它发挥作用,并取得了几乎相同的结果。这是我的解决方案。只需按照以下样式重新创建按钮的行为:

button {
  background-color: #ccc;
  border-style: outset;
  border-color: #eee;
  border-radius: 6px;
}
button:hover, button:active, button:focus {
  background-color: #ddd;
}
button:active { border-style: inset; }

The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.

问题是,当你改变边界样式属性时,边界半径就会起作用。例如,当您使用border-radius时,Firefox的行为看起来就像是使用了border-style:在按钮的正常行为中使用的是start,在单击按钮时使用的是border-style: inset。只有额外的两行代码可以使它在Opera中的工作方式与其他浏览器几乎相同。

#1


3  

Rounded Corner or all browser you want to use folloing method

圆角或所有浏览器都要使用折叠方法

#divId{
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
}

Its work for me perfectly.

这对我来说是完美的。

#2


1  

Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.

不幸的是,Border-radius css样式并不完全支持跨浏览器。Opera是一个不提供支持的浏览器。

See: http://www.westciv.com/iphonetests/

参见:http://www.westciv.com/iphonetests/

#3


1  

First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).

首先,你试过-o-border-radius吗?第二,你试过普通的分区吗?有时表单元素拒绝某些样式。否则它就不支持(opera10没有)。

#4


0  

Border radius in Opera with other demos related to Opera.

Opera的边界半径与其他与Opera相关的演示。

button {
 background:#000;   
 color:#fff;
 border-radius: 15px;  
}

#5


0  

In Opera you can use this:

在Opera中,你可以这样使用:

.className {
  -o-border-radius: 3px;
}

#6


0  

I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution. Just recreate behavior of the button with following style:

我遇到了同样的问题,发现虽然Opera支持边界半径,但是它不能很好地使用按钮。但我设法使它发挥作用,并取得了几乎相同的结果。这是我的解决方案。只需按照以下样式重新创建按钮的行为:

button {
  background-color: #ccc;
  border-style: outset;
  border-color: #eee;
  border-radius: 6px;
}
button:hover, button:active, button:focus {
  background-color: #ddd;
}
button:active { border-style: inset; }

The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.

问题是,当你改变边界样式属性时,边界半径就会起作用。例如,当您使用border-radius时,Firefox的行为看起来就像是使用了border-style:在按钮的正常行为中使用的是start,在单击按钮时使用的是border-style: inset。只有额外的两行代码可以使它在Opera中的工作方式与其他浏览器几乎相同。