欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

圆角边框(CSS3)

程序员文章站 2022-05-11 08:11:15
...

从此以后,我们的世界不只有矩形。
语法格式:
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