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>
CSS中设置元素的圆角矩形的更多相关文章
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- 在css中设置图片的背景图，怎么设置图片纵向拉伸
css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- 关于CSS中的元素定位
---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 关于css中设置属性的常识
1.cellspacing 属性规定单元格之间的空间,请勿将该属性与 cellpadding 属性相混淆. 2.cellpadding 属性规定的是单元边沿与单元内容之间的空间. 3.text-ali ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS中 隐藏元素的常用方法
在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none; 让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面 ...
- html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
随机推荐
- linux 使用 jiffies 计数器
这个计数器和来读取它的实用函数位于 <linux/jiffies.h>, 尽管你会常常只是包含 <linux/sched.h>, 它会自动地将 jiffies.h 拉进来. 不 ...
- codemirror 行高 字体 行间距 设置
用的是 react-codemirror2 样式文件: ... .code-mirror{ font-size : 13px; line-height : 150%; } ... 引入样式文件: .. ...
- Tufurama CodeForces - 961E (cdq分治)
题面 One day Polycarp decided to rewatch his absolute favourite episode of well-known TV series " ...
- 网摘-获取屏幕dc并且将其画面显示在窗体中
获取屏幕dc并且将其画面显示在窗体中 HWND hWnd = ::GetDesktopWindow();//获得屏幕的HWND. HDC hScreenDC = ::GetDC(hWnd); // ...
- 008.MFC_ScrollBar
滚动条 CScrollBar 水平滚动条控件和垂直滚动条 滚动条消息 SB_THUMBTRACK SB_LINELEFT SB_LINERIGHT SB_PAGELEFT SB_PAGERIGHT 一 ...
- 机器学习 - Python 02
好了,咱们接着上一节的内容,继续学习机器学习中的Python语法部分.这一节算是Python语法的最后一节了.也就是说如果真的看懂了这两节的内容,理论上说就机器学习的领域或者方向,语言已经不是问题了. ...
- 第二阶段：4.商业需求文档MRD：3.PRD-页面结构图
这也是功能结构以及优先级 这是页面层级 页面结构图 再细分某一个频道或者子页面 层层细分 用mind做的页面结构图 里面也包含了功能
- Shell one
1.shell的运算符包括:算术运算符.关系运算符.布尔运算符.字符串运算符.文件测试运算符 1.1原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr ...
- 前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS
我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...
- Hive/Impala批量插入数据
问题描述 现有几千条数据,需要插入到对应的Hive/Impala表中.安排给了一个同事做,但是等了好久,反馈还没有插入完成--看到他的做法是:对每条数据进行处理转换为对应的insert语句,但是,实际 ...