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.超链接字体在按下鼠标 ...
随机推荐
- 雅奇880、990、小土豆调用EPX Studio 编译的DLL的编程方法~
在雅奇990中,使用“外部文件-调用链接库文件”命令实现与EP的通信,例如: 1.调用链接库文件(取项目文件信息() + '资源文件\Project1.dll', 'Unit1.rpas:Result ...
- Python第一周作业
import turtle turtle.color('black','red') turtle.pensize(10) turtle.begin_fill() for i in range(5): ...
- 杂谈 | 增量思维v.s.存量思维
无挂碍故,无有恐怖,远离颠倒梦想,究竟涅槃. ——<心经> 声明在前,本文并不是要论述“存量思维”是不好的, 而是整理某些场景下需要摒弃“存量思维”,或者提倡“增量思维”. 1 ...
- GO语言web框架Gin之完全指南（二）
这篇主要讲解自定义日志与数据验证 参数验证 我们知道,一个请求完全依赖前端的参数验证是不够的,需要前后端一起配合,才能万无一失,下面介绍一下,在Gin框架里面,怎么做接口参数验证的呢 gin 目前是使 ...
- [剑指offer]14-1.剪绳子
14-1.剪绳子 方法一 动态规划 思路:递归式为f(n)=max(f(i), f(n-i)),i=1,2,...,n-1 虽然我现在也没有彻底明白这个递归式是怎么来的,但用的时候还是要注意一下.f( ...
- python https请求报错：SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED]
python爬虫,使用requests库发送https请求报错:SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] 解决方法: imp ...
- Servlet（二）----注解配置
## Servlet3.0 * 好处: * 支持注解配置.可以不需要web.xml了. * 步骤: 1.创建JavaEE项目,选择Servlet的版本3.0以上,可以不创建web.xml 2. ...
- Contest 157
2019-10-06 12:15:28 总体感受:总体难度一般,dfs和dp题花了点时间,最后一题dp有思路,但是实现上不够好. 注意点:首先是hard问题的覆盖度依然是很大的问题,其次是要注意审题. ...
- 浅析二分搜索树的数据结构的实现（Java 实现）
目录 树结构简介 二分搜索树的基础知识 二叉树的基本概念 二分搜索树的基本概念 二分搜索树的基本结构代码实现 二分搜索树的常见基本操作实现 添加操作 添加操作初步实现 添加操作改进 查询操作 遍历操作 ...
- Mysql中的三类锁，你知道吗？
导读 正所谓有人(锁)的地方就有江湖(事务),人在江湖飘,怎能一无所知? 今天来细说一下Mysql中的三类锁,分别是全局锁.表级锁.行级锁. 文章首发于作者公众号[码猿技术专栏],原创不易,喜欢的点个 ...