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

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

本帖最后由 马黑黑 于 2024-9-9 12:17 编辑 <br /><br /><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 = , v = ;
var outputs = rngBox.querySelectorAll('output');

setBorderRadius = () => {
        var data = `${v}% ${v}% ${v}% ${v}%`;
        mydiv.style.setProperty('border-radius', data);
        msgbox.innerText = 'border-radius: ' + data + ';';
}

ranges.forEach((range,key) => {
        range.oninput = () => {
                v = 1 * range.value;
                outputs.value = range.value;
                setBorderRadius();
        };
});

setBorderRadius();
</script>

马黑黑 发表于 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 = , v = ;
var outputs = rngBox.querySelectorAll('output');

setBorderRadius = () => {
      var data = `${v}% ${v}% ${v}% ${v}%`;
      mydiv.style.setProperty('border-radius', data);
      msgbox.innerText = 'border-radius: ' + data + ';';
}

ranges.forEach((range,key) => {
      range.oninput = () => {
                v = 1 * range.value;
                outputs.value = range.value;
                setBorderRadius();
      };
});

setBorderRadius();
</script>

梦江南 发表于 2024-9-9 15:06

谢谢老师无私和辛苦！

马黑黑 发表于 2024-9-9 20:29

梦江南 发表于 2024-9-9 15:06
谢谢老师无私和辛苦！

{:4_190:}

红影 发表于 2024-9-9 20:42

一边拉动各个方向的数值，一边观察它们的变化，这样的互动真好{:4_187:}

红影 发表于 2024-9-9 20:44

让4不动，把1和3调大点，然后拉动2，看到了叶子或气球胖胖瘦瘦的变化{:4_173:}

红影 发表于 2024-9-9 20:47

下面和直接显示了调整后的数值，这个工具真好，想要什么样的形状可以这里调了{:4_187:}

彩云归 发表于 2024-9-9 21:27

直观教学好！谢谢分享！

马黑黑 发表于 2024-9-9 21:55

红影 发表于 2024-9-9 20:44
让4不动，把1和3调大点，然后拉动2，看到了叶子或气球胖胖瘦瘦的变化

四个值的是比较简单的

花飞飞 发表于 2024-9-9 22:06

这个用滑杆实现的。。。通过改数字改形状。。
先前那个用拖动关键点实现的，通过改形状看到数字改变。。
又是不同的实现方式，老师就是最强大脑。


花飞飞 发表于 2024-9-9 22:06

border-radius: 0% 45% 0% 100%;
通过滑杆，很快也实现了飞行器样式{:4_173:}

红影 发表于 2024-9-9 23:47

马黑黑 发表于 2024-9-9 21:55
四个值的是比较简单的

嗯嗯，8个值的比较难理解。

马黑黑 发表于 2024-9-10 11:46

红影 发表于 2024-9-9 23:47
嗯嗯，8个值的比较难理解。

也不算难吧？反斜杠前的是水平方向的，后面的是纵向方向的

马黑黑 发表于 2024-9-10 11:50

花飞飞 发表于 2024-9-9 22:06
border-radius: 0% 45% 0% 100%;
通过滑杆，很快也实现了飞行器样式

厉害

花飞飞 发表于 2024-9-10 19:59

马黑黑 发表于 2024-9-10 11:50
厉害

{:4_173:}厉害的是一楼的。

马黑黑 发表于 2024-9-10 21:03

花飞飞 发表于 2024-9-10 19:59
厉害的是一楼的。

一楼楼矮

红影 发表于 2024-9-10 23:01

马黑黑 发表于 2024-9-10 11:46
也不算难吧？反斜杠前的是水平方向的，后面的是纵向方向的

如果水平方向全是0，纵向方向貌似再怎么设置都没用呢。

马黑黑 发表于 2024-9-10 23:07

红影 发表于 2024-9-10 23:01
如果水平方向全是0，纵向方向貌似再怎么设置都没用呢。

8各值任何一个方向是0，它的相邻圆角都会受到影响。

红影 发表于 2024-9-11 10:46

马黑黑 发表于 2024-9-10 23:07
8各值任何一个方向是0，它的相邻圆角都会受到影响。

我这单核的大脑，还是理解一下四个属性值就行了，八个属性值的联合影响真挺难理解的{:4_173:}

马黑黑 发表于 2024-9-11 18:06

红影 发表于 2024-9-11 10:46
我这单核的大脑，还是理解一下四个属性值就行了，八个属性值的联合影响真挺难理解的

空间能力需要进一步培养
页: [1] 2 3
查看完整版本: border-radius四个属性值在线演示