border-radius四个属性值在线演示

马黑黑 · 发表于 2024-9-9 12:15

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-9-9 12:17 编辑

【说明】CSS的 border-radius 属性用于设置圆角半径，支持单值、双值、三值、四值等，最高支持八个值。本文演示圆角半径四值属性的实时设置。以下矩形四个角上的圆圈数字不是滑块，1 2 3 4 是 border-radius 属性值的次序标记。

1

2

3

4

左上 : 0

右上 : 0

右下 : 0

左下 : 0

马黑黑 · 发表于 2024-9-9 12:15

本帖最后由马黑黑于 2024-9-9 12:17 编辑

一楼代码：

<style>
#mydiv { margin: 30px auto; width: 400px; height: 400px; background: linear-gradient(lightblue,tan); box-sizing: border-box; position: relative; }
#mydiv::before { position: absolute; content: ''; inset: 0; border: 1px dashed gray; }
.markup{ position: absolute; width: 20px; height: 20px; color: #aaa; background: #eee; border-radius: 50%; font: normal 12px / 20px sans-serif; text-align: center; user-select: none; }
.markup:nth-of-type(1) { left: -10px; top: -10px; }
.markup:nth-of-type(2) { left: calc(100% - 10px); top: -10px; }
.markup:nth-of-type(3) { left: calc(100% - 10px); bottom: -10px; }
.markup:nth-of-type(4) { left: -10px; bottom: -10px; }
#rngBox { margin: 20px auto; width: 400px; }
#rngBox p { margin: 6px; display: flex; gap: 8px; }
#msgbox { margin: 20px auto; width: 400px; font-size: 18px; }
#msgbox:active { user-select: all; }
.num { display: inline-block; width: 20px; height: 20px; background: #eee; border-radius: 50%; font: normal 12px / 20px sans-serif; text-align: center; }
.tRed { color: red; }
</style>
<p>【说明】CSS的 <span class="tRed">border-radius</span> 属性用于设置圆角半径，支持单值、双值、三值、四值等，最高支持八个值。本文演示圆角半径四值属性的实时设置。以下矩形四个角上的圆圈数字不是滑块，<span class="num">1</span> <span class="num">2</span> <span class="num">3</span> <span class="num">4</span> 是 border-radius 属性值的次序标记。</p>
<div id="mydiv">
<div class="markup">1</div>
<div class="markup">2</div>
<div class="markup">3</div>
<div class="markup">4</div>
</div>
<div id="rngBox">
<p>
<label for="rng1">左上 : </label>
<input id="rng1" type="range" name="rng" min="0" max="100" value="0" />
<output>0</output>
</p>
<p>
<label for="rng2">右上 : </label>
<input id="rng2" type="range" name="rng" min="0" max="100" value="0" />
<output>0</output>
</p>
<p>
<label for="rng3">右下 : </label>
<input id="rng3" type="range" name="rng" min="0" max="100" value="0" />
<output>0</output>
</p>
<p>
<label for="rng4">左下 : </label>
<input id="rng4" type="range" name="rng" min="0" max="100" value="0" />
<output>0</output>
</p>
</div>
<div id="msgbox"></div>
<script>
var ranges = [rng1,rng2,rng3,rng4], v = [0,0,0,0];
var outputs = rngBox.querySelectorAll('output');
setBorderRadius = () => {
var data = `${v[0]}% ${v[1]}% ${v[2]}% ${v[3]}%`;
mydiv.style.setProperty('border-radius', data);
msgbox.innerText = 'border-radius: ' + data + ';';
}
ranges.forEach((range,key) => {
range.oninput = () => {
v[key] = 1 * range.value;
outputs[key].value = range.value;
setBorderRadius();
};
});
setBorderRadius();
</script>