css--->圆角设置
1.为元素添加四个相同的圆角：
语法结构：border-radius：r；
r为圆角的半径大小
eg:如下样式，给元素添加四个圆角为10px
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
2.为元素创建一个圆角
语法结构：
左上角：border-top-left-radius: r ；
右上角：border-top-right-radius: r ；
左下角：border-bottom-left-radius: r ；
右下角：border-bottom-right-radius: r ；
eg:如下样式，给元素添加左上角圆角为30px
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 30px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
3.为元素创建一个椭圆角
语法结构：
左上角：border-top-left-radius: x y ；
右上角：border-top-right-radius:x y ；
左下角：border-bottom-left-radius: x y ；
右下角：border-bottom-right-radius: x y ；
其中x表示圆角在水平方向上的半径大小，y表示圆角在垂直方向上的半径大小
eg:如下样式，给元素添加左上角圆角在水平方向上为10px，在垂直方向上为30px
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 10px 30px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
4.圆形设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
方法2：
定义:radius:50%(永远为容器的一半)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
}
</style> </head>
<body>
<div></div>
</body>
</html>
5.半圆设置：
语法结构：
border-radius:r1 r2 0 0;
其中r1和r2是左右上角的半径大小，左下角和右小角设置为0
设定条件:r1=r2=1/2width=height
eg:设定一个直径为100px的半圆
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 50px;
background-color: aqua;
border-radius: 50px 50px 0 0;
}
</style> </head>
<body>
<div></div>
</body>
</html>
6.椭圆形设置：
语法结构：
border-radius:x/y;
其中x表示圆角在水平方向上的半径大小，y表示圆角在垂直方向上的半径大小
eg:设置一个与容器为W:200px,H:100px内相切的一个椭圆形
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
7.给radius赋多个值的含义：
(1) border-radius：r1 r2;
其中r1是左上角和右下角的半径大小，r2是左下角和右上角的半径大小
eg:如下样式，左上角和右下角的半径为10px,左下角和右上角的半径为30px
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 30px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
(2) border-radius：r1 r2 r3 r4;
其中r1是左上角半径大小,r2是右上角半径大小，r3是右下角半径大小,r4是左下角半径大小
eg:如下样式，左上角半径大小10px,右上角半径大小20px，右下角半径大小30px,左下角半径大小40px
代码如下；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 20px 30px 40px;
}
</style> </head>
<body>
<div></div>
</body>
</html>
css--->圆角设置的更多相关文章
- 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）
留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- CSS圆角样式
CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...
- CSS圆角进化论
CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...
- CSS之设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
- [CSS属性设置，盒子模型，网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- DIV+CSS圆角边框
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...
- css圆角矩形及去掉空格属性
css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- CSS圆角效果
看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...
- 超链接字体颜色设置(通过html/css的设置方法)
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...
随机推荐
- ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone
ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone
- 基于Ubuntu的ORB-SLAM2项目环境搭建过程
目录 关于ORB-SLAM2 环境搭建 已有环境 创建环境 新建项目目录 安装Pangolin 安装OpenCV 3.2 安装Eigen DBoW2 and g2o (Included in Thir ...
- weblogic-CVE-2020-2551-IIOP反序列化学习记录
CORBA: 具体的对CORBA的介绍安全客这篇文章https://www.anquanke.com/post/id/199227说的很详细,但是完全记住是不可能的,我觉得读完它要弄清以下几个点: 1 ...
- MySQL数据备份与恢复(二) -- xtrabackup工具
上一篇介绍了逻辑备份工具mysqldump,本文将通过应用更为普遍的物理备份工具xtrabackup来演示数据备份及恢复的第二篇内容. 1. xtrabackup 工具的安装 1.1 安装依赖包 ...
- Eclipse新建项目介绍
最近在用Eclipse,对于一个新手来说,新建项目时出现五花八门的名字,该选择哪个进行创建呢?今天小编抱着学习的态度,顺便整理分享给大家. 选择File->New->Project... ...
- jquery实现元素的显示和隐藏
这个是指定表格列的隐藏的demo,其余的都大同小异了 $("#account-table tr").find($("#tcNum")).show();//sho ...
- 从ISTIO熔断说起-轻舟网关熔断
最近大家经常被熔断洗脑,股市的动荡,让熔断再次出现在大家眼前.微服务中的熔断即服务提供方在一定时间内,因为访问压力太大或依赖异常等原因,而出现异常返回或慢响应,熔断即停止该服务的访问,防止发生雪崩效应 ...
- Transformers 快速入门 | 一
作者|huggingface 编译|VK 来源|Github 理念 Transformers是一个为NLP的研究人员寻求使用/研究/扩展大型Transformers模型的库. 该库的设计有两个强烈的目 ...
- OpenCV-Python 直方图-2：直方图均衡 | 二十七
目标 在本节中, 我们将学习直方图均衡化的概念,并利用它来提高图像的对比度. 理论 考虑这样一个图像,它的像素值仅局限于某个特定的值范围.例如,较亮的图像将把所有像素限制在高值上.但是一幅好的图像会有 ...
- OpenCV-Python 轮廓：入门 | 二十一
目标 了解轮廓是什么. 学习查找轮廓,绘制轮廓等. 你将看到以下功能:cv.findContours(),cv.drawContours() 什么是轮廓? 轮廓可以简单地解释为连接具有相同颜色或强度的 ...