フロントエンド デモ シリーズ ディレクトリ: https://blog.csdn.net/karshey/article/details/132585901
効果
効果のプレビュー: https://codepen.io/karshey/pen/zYyBPBR
参考：
ファンシーボーダー半径ジェネレーター (9elements.github.io)
CSS ボーダー半径の新しいゲームプレイ (視覚化生成ツールを含む) - Ghost Girl - Blog Park (cnblogs.com)
GitHub - florinpop17/app-ideas: コーディング スキルを向上させるために使用できるアプリケーションのアイデアのコレクション。
原理
border-radius値はパーセント記号です。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid;
padding:10px;
width:300px;
height:300px;
border-top-left-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
これにはCSSコードがあります:
border-top-left-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;
したがって：
- 上部の左 25% からラジアンが始まります
- 左は上位 50% にラジアンがあります
- 底部の右 25% に円弧があります
- 右は下 50% にラジアンがあります
値も同じくpxです。
コード
- このコードの単位は
px - 必要に応じて
%、次のr[num] = event.target.value + 'px'ように変更します。r[num] = event.target.value + '%' classその中の 1、2 などの数字は、スタイル (位置) を記述するために使用されます。- 各
inputフォームの属性を使用して、属性を取得することで、data-indexどの子要素にイベントがあるかを知ることができますonchange(イベントは親要素に委任されます)。event.target.attributes[2].valuedata-index
場所がわからない場合は、イベントを出力して確認できます
class対応する場所:
知らせ：
borderTopLeftRadius: は上と左、つまり 1 と 8borderTopRightRadius: は上と右、つまり 2 と 3borderBottomRightRadius: は下と右、つまり5 と 4 (順序に注意してください)borderBottomLeftRadius: は下と左、つまり 6 と 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius</title>
<style>
.box {
height: 400px;
width: 400px;
margin: 100px auto;
position: relative;
border: 1px solid #9E9E9E;
background: linear-gradient(45deg, #00bcd4, #d135ec);
}
.item {
width: 40px;
height: 25px;
background-color: #d1d0d0;
border: 1px solid #9e9e9e;
position: absolute;
}
.one {
top: -35px;
}
.two {
top: -35px;
right: 0;
}
.there {
right: -55px;
}
.four {
right: -55px;
bottom: 0;
}
.five {
bottom: -35px;
right: 0;
}
.six {
bottom: -35px;
}
.seven {
left: -55px;
bottom: 0;
}
.eight {
left: -55px;
}
</style>
</head>
<body>
<div class="box" id="box" onchange="Onchange(event)">
<input type="text" class="item one" data-index="1">
<input type="text" class="item two" data-index="2">
<input type="text" class="item there" data-index="3">
<input type="text" class="item four" data-index="4">
<input type="text" class="item five" data-index="5">
<input type="text" class="item six" data-index="6">
<input type="text" class="item seven" data-index="7">
<input type="text" class="item eight" data-index="8">
</div>
</body>
</html>
<script>
// 左上18
// 右上23
// 下右54
// 左下67
let r = new Array(9).fill(0);
function Onchange(event) {
// 事件委托 获取子元素的data-index：event.target.attributes[2].value
let num = event.target.attributes[2].value
r[num] = event.target.value + 'px'
console.log(r)
borderRadiusChange()
}
function borderRadiusChange() {
let box = document.getElementById('box')
let rr = new Array()
rr.push(r[1], r[8])
box.style.borderTopLeftRadius = rr.join(' ')
box.style.borderTopRightRadius = r.slice(2, 4).join(' ')
// 清空数组
rr.length = 0
rr.push(r[5], r[4])
box.style.borderBottomRightRadius = rr.join(' ')
box.style.borderBottomLeftRadius = r.slice(6, 8).join(' ')
}
</script>