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;},也就 ...
随机推荐
- vue权限控制菜单显示
对于不同角色显示不同的菜单 思路1: 本地放一份完整的菜单数据,通过后台返回角色的菜单列表两者对比,筛选需要显示的菜单数据绑定,这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输入地址是 ...
- ZR1153
ZR1153 首先我们可以发现一个比较简单的容斥做法 直接暴力枚举\(2^m\)个限制强制不合法,算贡献 注意如果两个限制冲突那么答案为0 直接暴力差分就好了 这样就有了快乐的\(30\)分了 接下来 ...
- 【u034】追查坏奶牛
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这 ...
- Mac 安装Maven，并设置环境变量
1 / 打开电脑,找到终端命令行工具,输入maven环境变量查询工具: mvn -v 2 / 执行上述命令后,此时没有安装的两个提示信息,一个时没有mvn命令,一个时没有安装maven.执行下面命令开 ...
- 非GUI-Qt程序运行后显示Console（简单好用：在pro文件中加入： CONFIG += console）
----我的生活,我的点点滴滴!! 有很多时候,我们在程序中添加了好Debug信息,方便程序在运行期间打印出一些我们需要的信息或者,想用他来显示一些必要信息时, 那么console就太重要了,曾几何时 ...
- iptables限速
####限速 限制指定时间包的允许通过数量及并发数-m limit --limit n/{second/minute/hour}:指定时间内的请求速率"n"为速率,后面为时间分别为 ...
- 微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
最近在学习微信小程序时遇到了个问题:官方的背景音乐的api实例代码中的音乐src不管用(可能有期限,后面的方法获取的src同样可能有期限),因此本人只能自己去寻找办法获取src,现将方法记录在下面.( ...
- LibreOJ 6278. 数列分块入门 2 题解
题目链接:https://loj.ac/problem/6278 题目描述 给出一个长为 \(n\) 的数列,以及 \(n\) 个操作,操作涉及区间加法,询问区间内小于某个值 \(x\) 的元素个数. ...
- WTM 3.1发布，完美支持.netcore 3.1
在过去的2019年,承蒙各位的厚爱,WTM从零开始一年的时间在GitHub上收获了将近1600星,nuget上的下载量累计超过10万. WTM所坚持的低码开发,快速实现的理念受到了越来越多.netco ...
- 06_URL参数截取
1:如何获取URL传给子页面的参数: //获得参数(只对字母数字等有效,参数值为中文则不能传) function getQueryString(name) { var reg = new RegExp ...