border-radius在两个值之间使用斜杠(“/”)

时间:2015-06-05 09:40:09

标签: javascript jquery css

通过javascript或jquery方法,当我尝试使用斜杠修改css border-radius时,结果之间没有斜杠。

示例:

document.getElementById("mydiv").style.borderRadius ="20% / 15%"; 

或:

$( "#mydiv" ).css({'border-radius':'20% / 15%'})

结果是:border-radius: 20% 15%;(值之间没有斜线)

但是我需要这个斜杠“/”来定义角落的不同角度

任何解决方案?

感谢所有回复。

我的问题不是现场的效果,是的,它是有效的,但是页面中的写入结果(用于保存页面)因为在bloc div中写入的css是错误的:例如“<div id="mydiv" style="border-radius: 20% 15%;"> 然后,当再次读取文件时,结果与border-radius: 20% / 15%;不一样。

3 个答案:

答案 0 :(得分:2)

您的代码至少在Chrome中按预期工作。 但Chrome DevTools显示此属性错误。

&#13;
&#13;
$('#s').on('click', function() {
    $('#mydiv').css({'border-radius': '20% / 5%'});
});
$('#d').on('click', function() {
    alert($('#mydiv').css('border-radius'));
});
&#13;
div {
    width: 100px;
    height: 100px;
    background: #000;
}
button {
    display: block;
    margin: 10px 0 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="mydiv"></div>
<button id="d">get border-radius</button>
<button id="s">set border-radius</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

你有没有试过反对它?

root@atd-ciso:/# tail -f nohup.out
Waiting for database server to accept connections...........................................................

(删除**)

答案 2 :(得分:1)

一个简单的解决方案是指定所有值而不使用速记,例如(MDN):

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

扩展,你可以这样做:

$( "#mydiv" ).css({
  'border-top-left-radius':     '20% 5%',
  'border-top-right-radius':    '20% 5%',
  'border-bottom-right-radius': '20% 5%',
  'border-bottom-left-radius':  '20% 5%',
})

// OR

var mydivstyle = document.getElementById("mydiv").style;
mydivstyle.borderTopLeftRadius = '20% 5%';
mydivstyle.borderTopRightRadius = '20% 5%';
mydivstyle.borderBottomLeftRadius = '20% 5%';
mydivstyle.borderBottomRightRadius = '20% 5%';

工作示例:

更新以显示正确的css属性(由OP请求)

$("#mydiv").css({
  'border-top-left-radius':     '20% 15%',
  'border-top-right-radius':    '20% 15%',
  'border-bottom-right-radius': '20% 15%',
  'border-bottom-left-radius':  '20% 15%',
});

$("#output").text(
  $("#mydiv").css('border-radius')
);
#mydiv { height: 40px; width: 100%; background: #00f; }
#output { font-family: monospace; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<h2>Result: (<code>$("#mydiv").css('border-radius')</code>)</h2>
<div id="output"></div>

来自MDN

的详细信息

更新

Chrome开发工具似乎不一致地显示此属性。以下是一些屏幕:

使用style=border-radius: 10% 5%;

no slash

使用style=border-radius: 10% / 5%;

with slash

运行jQuery代码段后(读取10% 5%但角落属性展开为10% / 5%):

javascript property change