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>
相关文章
- 1. 圆角矩形
- 2. 圆形变圆角矩形
- 3. Android 圆角矩形
- 4. Photoshop中圆角矩形边角翻转
- 5. 自由设置矩形的四个角为圆角
- 6. HTML5 canvas元素绘制三角形、矩形、圆形等基本图形
- 7. 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
- 8. 纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
- 9. 矩形、三角形与圆的关系
- 10. android绘制圆角矩形
- 更多相关文章...
- • MySQL AS：设置别名 - MySQL教程
- • Spring中Bean的作用域 - Spring教程
- • IntelliJ IDEA代码格式化设置
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档
欢迎关注本站公众号,获取更多信息
相关文章