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.超链接字体在按下鼠标 ...
随机推荐
- 使用PageHelper插件分页时，如何对对象进行转换以及添加属性
一.插件介绍 PageHelper是针对Mybaits的分页插件,支持任何复杂的单表.多表分页. 二.基本用法 以springboot为例,有两种方式配置,一种是传统的,引入依赖,编写配置类:一种是使 ...
- consoleInfo 输出 数组套对象 不显示...的方法 序列化 再反序列化
consoleInfo (...args) { // console.info('this', this) const name = this.$options.name let outName = ...
- 【Weiss】【第03章】练习3.18：检查平衡符号
[练习3.18]用下列语言编写检测平衡符号的程序 a.Pascal ( begin/end, ( ), [ ], { } ). b.C语言( /* */, ( ), [ ], { }). c.解释如何 ...
- 【TIJ4】第五章全部习题
第五章习题 5.1 package ex0501; //[5.1]创建一个类,它包含一个未初始化的String引用.验证该引用被Java初始化成null class TestDefaultNull { ...
- ASP.NET WebApi实现Token验证
记录笔记,在博客园中有很多实现Token的方法,这是我看过他们学到的,然后找到适合自己的解决方案,自己无聊总结一下学习经验写下的 WebApi后端接口实现Token验证 Token是在客户端频繁向服务 ...
- Java多线程并发08——锁在Java中的应用
前两篇文章中,为各位带来了,锁的类型及锁在Java中的实现.接下来本文将为各位带来锁在Java中的应用相关知识.关注我的公众号「Java面典」了解更多 Java 相关知识点. 锁在Java中主要应用还 ...
- Journal of Proteome Research | Proteomic analysis of Rhizobium favelukesii LPU83 in response to acid stress.（酸胁迫下根瘤菌LPU83（Rhizobium favelukesii）的蛋白质组学分析）(解读人：丑天胜）
文献名:Proteomic analysis of Rhizobium favelukesii LPU83 in response to acid stress.(酸胁迫下根瘤菌LPU83(Rhizo ...
- Cobait Strike的socks与ew代理使用
cobait strike介绍 Cobalt Strike 一款以 metasploit 为基础的 GUI 的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,win exe ...
- win 7 系统过期处理办法
超级尴尬,刚装的win7 系统居然过期了.下次再也不装盗版了,吼吼吼 处理方法就是下载oem7F7 软件安装,不用再怎么操作就好了. 就是这么简单,并不用像网上那样找什么激活码.
- 旷视6号员工范浩强：高二开始实习，“兼职”读姚班，25岁在CVPR斩获第四个世界第一...
初来乍到,这个人说话容易让人觉得"狂". "我们将比赛结果提交上去,果不其然,是第一名的成绩."当他说出这句话的时候,表情没有一丝波澜,仿佛一切顺理成章. 他说 ...