Question

请检查我的旧问题：
Old question
在旧问题中，我使用帆布来降球效果。我可以只使用round shaped square divs并实施掉球吗？我想避免使用画布。

Answer 1

您可以使用CSS3属性border-radius将方形div整形为圆形。使用此属性以及background颜色将在屏幕上呈现圆形圆圈。

您所要做的就是将border-radius设置为方形长度的一半（使用width和height属性设置方形长度）并且瞧：您有一个圆形div。

如果您想支持不支持CSS3的旧浏览器，则可以将background-image属性设置为圆形图像。

您可以先设置position属性为absolute，然后设置left和top属性以将div从顶部偏移，从而设置div的位置祖先定位元素的左角（即position属性设置为除static之外的任何内容。

var round = document.getElementById('round');

// position and radius of circle
var x = 20, y = 20, r = 20;

// modifying CSS properties via DOM javascript 

// must be set in order to set the position of the circle
round.style.position = 'absolute';

// setting position
round.style.left = (x - r) + 'px';
round.style.top = (y - r) + 'px';

// setting diameter
round.style.width = (2 * r) + 'px';
round.style.height = (2 * r) + 'px';

// make square into a circle
round.style.borderRadius = r + 'px';

// colour
round.style.background = '#000';

http://jsfiddle.net/djvv1b1y/2/

使用div来降低球的效果

1 个答案: