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.超链接字体在按下鼠标 ...
随机推荐
- dos下 批处理 用 pause 可以在最后暂停 查看结果信息 build.bat
dos下 批处理 用 pause 可以在最后暂停 查看结果信息
- java时间切片工具
项目中经常会遇到根据根据时间区间来查询数据的场景, 如时间跨度大可能相应的sql的执行效率会显著降低, 因此可以对时间区间进行切割成若干个小范围的时间片, 这样不仅可以提高sql的性能还可以做一下并发 ...
- 面试官再问我如何保证 RocketMQ 不丢失消息,这回我笑了！
最近看了 @JavaGuide 发布的一篇『面试官问我如何保证Kafka不丢失消息?我哭了!』,这篇文章承接这个主题,来聊聊如何保证 RocketMQ 不丢失消息. 0x00. 消息的发送流程 一条消 ...
- DRF之restful规范、Postman接口测试
一. DRF简介 Django REST框架是一个功能强大且灵活的工具包,用于构建Web API. 使用REST框架的一些原因: 该网站可浏览API是你的开发人员一个巨大的可用性胜利. 身份验证策略包 ...
- hdu3367最大伪森林（并查集）
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3367/ 题目要求一个连通图的最大伪森林,伪森林是一个最多有一个回路的图.我们只要用Kruskal最大生成树的策略 ...
- 基本的访问控制列表ACL配置
摘要: 访问控制列表ACL (Access Control L ist)是由permit或 deny语句组成的一系列有顺序的规则集合,这些规则根据数据包的源地址.目的地址.源端口.目的端口等信息 来 ...
- 搭建SQL server AwaysOn集群
1.环境 系统:windows server 2012 R2 数据库版本:SQL server 2012 三台服务器,IP分别是:10.10.10.111,10.10.10.112,10.10.10. ...
- 服务器安装 mongodb
参考 https://www.cnblogs.com/layezi/p/7290082.html
- Map m = Collections.synchronizedMap(new HashMap())
Collections.synchronizedMap(new HashMap())让你创建的new HashMap()支持多线程数据的同步.保证多线程访问数据的一致性 来源:http://www.b ...
- linux入门系列20--Web服务之LNMP架构实战
作为本入门系列最后一篇文章,将演示如何在CentOS7环境下搭建LNMP环境来构建个人博客网站. 常见搭建网站的方式有LAMP.LNMP.IIS.Nginx.Tomcat等等,本文演示比较流行的基于L ...