CSS中设置元素的圆角矩形

站长

发表文章数:4245

Serilog高级玩法之用Serilog记录所选终结点附加属性

圆角矩形介绍

  • 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>

CSS中设置元素的圆角矩形

  • 如果我们的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>

CSS中设置元素的圆角矩形

  • 如果使用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>

CSS中设置元素的圆角矩形

  • 设置椭圆形实践
  • 实现椭圆形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>

CSS中设置元素的圆角矩形

MacOSX 安装 TensorFlow

设置半圆形

  • 设置右半圆形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>

CSS中设置元素的圆角矩形

  • 设置左半圆形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>

CSS中设置元素的圆角矩形

  • 设置上半圆形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>

CSS中设置元素的圆角矩形

  • 设置下半圆形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>

CSS中设置元素的圆角矩形

Java 内存模型

未经允许不得转载:www.xssyun.com作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家-资源网,新人技术交流平台,一个湖北娃的个人博客
原文地址:《CSS中设置元素的圆角矩形》 发布于2020-01-22

分享到:
赞(0) 生成海报

长按图片转发给朋友

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册