1. 使用border-radius属性 border-radius是创建圆角的基本CSS属性，也是非常有用且常用的一个属性。它允许你将元素的直角边框转换为圆角。这个属性可以应用于任何具有可见边框或背景的 HTML 元素，包括盒子模型中的内边距和边框。 border-radius 可以接受不同的值来控制各个角的曲率，这里是一些主要的用法： 单值 当只指定一个值时，这个值将被应用到所有的四个角： div{ border-radius: 10px; } 这将使所有四个角都有 10 像素的圆角。 图例 双值 当指定两个值时，第一个值将应用于水平方向的圆角半径，第二个值应用于垂直方向的圆角半径： div{ border-radius: 50px / 20px; } 这将产生椭圆形的角，水平方向的半径为 50 像素，垂直方向的半径为 20 像素。 图例 四值 当指定四个值时，它们分别对应四个角（顺时针方向）：top-left, top-right, bottom-right, bottom-left： div{ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; } 这将使得左上角有 10 像素的圆角，右上角有 20 像素的圆角，依此类推。 图例 每角单独指定 也可以为每个角单独指定圆角大小： div{ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius:...