💅🏻 border-radius,radius 帮你轻松搞定圆角！✨
姐妹们！谁还没用过圆角呢？🙈 现在圆角可是设计界的大趋势，它让网页、App、甚至小红书笔记都变得更柔和、更友好，看起来舒服多了！✨
今天就来跟大家分享一下我最近学习到的一个小技巧：用 border-radius 和 radius 轻松搞定圆角！😎
✨ border-radius 是什么？✨
简单来说，border-radius 就是一个 CSS 属性，可以用来设置元素的圆角大小。 就像我们用剪刀把纸片剪成圆角一样，border-radius 就能把元素的角变成圆角！
🌈 border-radius 的用法：🌈
单值： 如果你想让所有角都是一样的圆角，就可以直接使用一个值。比如：border-radius: 10px; 会让元素的四个角都是半径为 10px 的圆角。
多值： 如果你想要不同的圆角，就可以用多个值来设置。比如： border-radius: 10px 20px; 会让左上角和右下角的圆角半径为 10px，右上角和左下角的圆角半径为 20px。
四个值： 如果你想更精准地控制每个角的圆角，可以使用四个值。比如：border-radius: 10px 20px 30px 40px; 分别代表左上角、右上角、右下角、左下角的圆角半径。
百分比： border-radius 也可以用百分比来设置。比如：border-radius: 50%; 会让元素变成一个圆形。
💡 radius 是什么？💡
radius 和 border-radius 其实是一样的，都是用来设置圆角的属性。 但是，radius 是一个更简洁的写法，只适用于 CSS Grid 和 Flexbox 的布局。
✨ 实战演练！✨
现在就来实践一下吧！我们用一个简单的例子来演示 border-radius 的用法：
css
.box {
width: 200px;
height: 100px;
background-color: f0f0f0;
border: 1px solid ccc;
border-radius: 10px;
这段代码会创建一个宽 200px，高 100px 的灰色盒子，并设置了 1px 的灰色边框。 然后，border-radius: 10px; 会让这个盒子所有角都变成半径为 10px 的圆角。
✨ 总结一下：✨
border-radius 和 radius 都可以用来设置元素的圆角大小。
可以通过不同的值来设置不同的圆角效果。
可以用百分比来设置圆形。
🌸 小红书上有很多优秀的设计师，大家可以关注一下，学习更多设计技巧！🌸
你最喜欢用哪种圆角呢？评论区分享你的想法吧！👇