CSS中設置元素的圓角矩形

圓角矩形介紹

  • CSS中經過border-radius屬性能夠實現元素的圓角矩形。
  • border-radius屬性值一共有4個,左上、右上、左下、右下。
  • border-radius屬性值規則以下:第一個值爲左上、第二個值爲右上、第三個值爲左下、第四個值爲右下。
  • 假如border-radius屬性值都是一致的我能夠設置一個屬性值便可。

圓角矩形實踐

  • 圓角矩形基本使用方式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 100px;
        border: 2px solid rebeccapurple;
        border-radius: 10px 20px 30px 40px;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 若是咱們的border-radius屬性值一致實踐。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 100px;
        border: 2px solid rebeccapurple;
        border-radius: 20px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 若是使用border-radius屬性值將元素設置爲圓形呢。
  • 第一步:要設置的元素寬高度必須一致。
  • 第二步:使用border-radius屬性值必須是要設置的元素寬高度的一半。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 100px;
        border: 2px solid rebeccapurple;
        border-radius: 50px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 設置橢圓形實踐
  • 實現橢圓形border-radius屬性值必須是元素的高度一半便可。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 50px;
        border: 2px solid rebeccapurple;
        border-radius: 25px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

設置半圓形

  • 設置右半圓形border-radius屬性值左上、和右下爲元素的寬度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 50px;
        height: 100px;
        border: 2px solid rebeccapurple;
        border-radius: 50px 0px 0px 50px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 設置左半圓形border-radius屬性值右上、和左下爲元素的寬度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 50px;
        height: 100px;
        border: 2px solid rebeccapurple;
        border-radius: 0px 50px 50px 0px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 設置上半圓形border-radius屬性值左上、和右上爲元素的高度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 50px;
        border: 2px solid rebeccapurple;
        border-radius: 50px 50px 0px 0px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

  • 設置下半圓形border-radius屬性值左下、和右下爲元素的高度一致便可。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圓角矩形</title>
  <style>
      div{
        width: 100px;
        height: 50px;
        border: 2px solid rebeccapurple;
        border-radius: 0px 0px 50px 50px ;
      }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

相關文章
相關標籤/搜索