圆角边框(CSS3)

mac2025-08-14  10

从此以后,我们的世界不只有矩形。 语法格式: Border-radius: 水平半径/垂直半径; 一般我们垂直半径都是省略的默认和水平半径一样。 border-radius: 左上角 右上角 右下角 左下角;

<style> div { width:200px; height:200px; border:1px solid red; margin:10px 40px; text-align: center; line-height: 200px; } div:first-child { border:10px solid red; border-radius: 20px/50px; } div:nth-child(2) { border-radius: 20px; } div:nth-child(3) { border-radius: 15px 0; } div:nth-child(4) { border-radius:100px; } div:nth-child(5) { border-radius: 50%; } div:nth-child(6) { border-radius: 100px 0; } div:nth-child(7) { border-radius: 200px 0 0 0; } div:nth-child(8) { border-radius: 100px 100px 0 0; height:100px; /*高度减半*/ } div:nth-child(9) { 68 border-radius: 100px; height:100px; } div:nth-child(10) { border-radius: 100%; height:100px; } </style
最新回复(0)