圆角边框属性

一、边框圆角

1.样式：border-radius

2.取值：

​ + 直接书写 数字+px 即可

​ + 标准书写：左上角x轴半径 右上轴x半径 右下轴x轴半径 左下轴x半径 / 左上角y轴半径 右上轴y半径 右下轴y轴半径 左下轴y半径

​ - 在书写过程中，如果x轴和y轴值一样，可以省略y轴不写

​ - 如果要省略就省略四个y轴 ，要么全写、要么全不写

3.案例

​ + 案例一:搜索框

<style>
    input {
      width: 300px;
      height: 60px;
      margin: 50px;
      border-radius: 30px;
      padding-left: 30px;
    }
  </style>
  <input type="text">

​ + 案例二：点击头像，上传头像

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      border-radius: 50%;

      overflow: hidden;
    }

    img {
      width: 200px;
      height: 200px;
    }
  </style>
  <div>
    <img src="./abc.png" alt="">
  </div> -->