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.圆形设置：

　　方法1：
　　　　条件1：定义width等于height
　　　　条件2：radius=1/2width
　　代码如下：
<!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--->圆角设置的更多相关文章

  1. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. CSS圆角样式

    CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...

  3. CSS圆角进化论

     CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...

  4. CSS之设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  5. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  6. DIV+CSS圆角边框

    简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

  7. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  8. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  9. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  10. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

随机推荐

  1. go源码分析(三) 使用go http包开发web时遇到的坑之卸载插件，重启插件管理，仍然可以访问已经卸载的插件

    问题描述: web页面下发重启指令后,对卸载插件的处理不完整(虽然列表已经没有插件描述,但是在HandleFunc的路由列表中依然存在) 我们需要清空路由列表map 路由列表结构见代码: net/ht ...

  2. ASP.NET WebApi实现Token验证

    记录笔记,在博客园中有很多实现Token的方法,这是我看过他们学到的,然后找到适合自己的解决方案,自己无聊总结一下学习经验写下的 WebApi后端接口实现Token验证 Token是在客户端频繁向服务 ...

  3. python enumerate用法总结（转）

    原文链接:https://blog.csdn.net/churximi/article/details/51648388 enumerate()说明 enumerate()是python的内置函数en ...

  4. 关于浏览器Number.toFixed的错误修复

    问题描述如下: var n = 1.255; var fixed = n.toFixed(2); console.log(fixed);//结果:1.25 /* 以上代码运行预期的结果是1.26,但是 ...

  5. shell编程学习之使用jq对json数据进行提取

    shell编程学习之使用jq对json提取 jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以 ...

  6. Redhat 线下赛 WEB WP

    赛制 给每个参赛队伍所有题目的gamebox,参赛队伍在开赛时就能获取到所有题目的源码,可以选择先防御后攻击或先攻击后防御,只要拿到gamebox上的flag,机器人就会自动帮你攻击场上所有未防御选手 ...

  7. [模板] LCA-最近公共祖先-倍增法

    2019-11-07 09:25:45 C.树之呼吸-叁之型-树上两点路径长度 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 7 (4 ...

  8. [二分]codeforces 274A k-Multiple Free Set

    k-Multiple Free Set time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. 封装WebSocket（建立链接、主动关闭）

    一.前言 近期项目里需做一个在线聊天功能,就想要在对话的时候建立socket链接.又因为聊天只是其中一个部分,在它外面还有一些全局的消息通知需要接收,因此也需要建立socket链接.在该项目里不仅一处 ...

  10. eclipse-JEE配置Tomcat并发布第一个项目

    一.配置过程 Window--preferences--Server--Runtime Environment, 然后点击add 我下载的是Tomcat7.0,选择你的版本就行了 选择Tomcat的安 ...