前端初学者必备：CSS3 圆角和边框的实用指南

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

CSS3 中的圆角与边框是网页开发中一定会用到的 css 属性，这在现代、美观的界面中非常有用，那如何使用这些属性来创建具有圆角和自定义边框的元素，今天瑶琴带大家来学习或复习这些两个知识点。

1.圆角（Border Radius）：

CSS3 允许为元素的边角添加圆角效果，

圆角属性：border-radius：此属性用于设置元素的四个角的圆角半径。你可以为每个角指定不同的半径，也可以使用简写形式为所有角设置相同的半径。

/* 为所有角添加相同的圆角效果 */
.box {
  border-radius: 10px;
}

/* 分别为每个角添加不同的圆角效果 */
.box {
  border-top-left-radius:15px;
  border-top-right-radius:10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius:20px;
}

border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius：这些属性允许你分别为元素的每个角设置不同的圆角半径。

圆角示例：

/* 创建一个带有圆角的盒子 */
.rounded-box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border-radius: 20px; /* 所有角都有相同的圆角半径 */
}

/* 创建一个椭圆形元素 */
.ellipse {
  width: 150px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%; /* 圆角半径设置为宽度的50%以创建椭圆形 */
}

2.边框（Border）：

边框属性允许你自定义元素的边框样式、颜色和宽度。你可以使用这些属性来为元素添加各种边框效果。

边框属性：border-width：设置边框的宽度。border-style：设置边框的样式，如实线、虚线、双线等。border-color：设置边框的颜色。border：可以使用这个属性一次性设置边框的宽度、样式和颜色。

边框示例：

/* 创建一个带有自定义边框的盒子 */
.custom-border {
  width: 200px;
  height: 100px;
  border-width: 2px; /* 边框宽度 */
  border-style: dashed; /* 边框样式 */
  border-color: #e67e22; /* 边框颜色 */
}

/* 使用border属性一次性设置边框 */
.box-with-border {
  width: 150px;
  height: 150px;
  border: 4px solid #27ae60; /* 宽度、样式、颜色 */
}

圆角和边框的组合：通常，你可以将圆角和边框属性结合使用，以创建具有自定义边框和圆角的元素。

/* 创建一个带有圆角和自定义边框的盒子 */
.rounded-border-box {
  width: 200px;
  height: 100px;
  background-color: #f39c12;
  border: 2px solid #e74c3c; /* 边框宽度和颜色 */
  border-radius: 15px; /* 圆角半径 */
}

这些圆角和边框的属性可以根据网页的需求进行调整，来创建各种各样的边框和圆角效果，使网页更具吸引力和创意。在初级前端刚入职场时，可能会问到这些基础知识。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。