前端demo系列目錄：https://blog.csdn.net/karshey/article/details/132585901
效果
效果預(yù)覽：https://codepen.io/karshey/pen/zYyBPBR
參考：
Fancy Border Radius Generator (9elements.github.io)
https://border-radius.com/
CSS border-radius 新玩法(含可視化生成工具) - 鬼小妞 - 博客園 (cnblogs.com)
GitHub - florinpop17/app-ideas: A Collection of application ideas which can be used to improve your coding skills.
原理
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%;
因此：
- top在左邊25%的地方開始有弧度
- left在上面50%的地方有弧度
- bottom在右邊25%的地方有弧度
- right在下面50%的地方有弧度
值為px同理。
代碼
- 此代碼的單位為
px - 若想要為
%的，將r[num] = event.target.value + 'px'改為r[num] = event.target.value + '%' -
class中的one、two等數(shù)字是寫樣式（位置）用的 - 每個
input表單的data-index屬性，可以用來得知是哪個子元素發(fā)生了onchange事件（事件委托在父元素），通過event.target.attributes[2].value獲取data-index屬性
不知道在哪的話可以輸出event看看
class對應(yīng)位置：文章來源：http://www.zghlxwxcb.cn/news/detail-685606.html
注意：文章來源地址http://www.zghlxwxcb.cn/news/detail-685606.html
-
borderTopLeftRadius：是上和左，即1和8 -
borderTopRightRadius：是上和右，即2和3 -
borderBottomRightRadius：是下和右，即5和4（注意順序?。?/li> -
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(' ')
// 清空數(shù)組
rr.length = 0
rr.push(r[5], r[4])
box.style.borderBottomRightRadius = rr.join(' ')
box.style.borderBottomLeftRadius = r.slice(6, 8).join(' ')
}
</script>
到了這里，關(guān)于【前端demo】CSS border-radius可視化 原生實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
