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. c#序列化和反系列化json与类型对象转换

    先添加程序集:  System.Web.Extensions(在 System.Web.Extensions.dll 中) 引用:using System.Web.Script.Serializati ...

  2. js Array方法总结

    修改器方法(9) copyWithin(target: number, start: number, end?: number): this; // 浅复制数组的一部分到同一数组中的另一个位置,并返回 ...

  3. 多个文件名大小写不同，是因为运行代码是大写E，用vscode运行的是小写e，解决方案：手动npm run dev #There are multiple modules with names that only differ in casing.

    多个文件名大小写不同,是因为运行代码是大写E,用vscode运行的是小写e,解决方案:手动npm run dev #There are multiple modules with names that ...

  4. Http报文和Request和Response的常用方法

    简述 它是HTTP应用程序之间发送的数据块.这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义,后面跟着可选的数据部分.这些报文都是在客户端.服务器和代理之间流动. HTTP报文的流 ...

  5. Natas16 Writeup（正则匹配，php命令执行）

    Natas16: 源码如下 <? $key = ""; if(array_key_exists("needle", $_REQUEST)) { $key ...

  6. Web_jQuery

    第1章: jQuery简介 为了简化 JavaScript 的开发,一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数,简化HTML与JavaScript之 ...

  7. 什么是EIP、ESP、EBP

    堆栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对堆栈的插入和删除操作被称入栈和出栈.有一组CPU指令可以实现对进程的内存实现堆 ...

  8. 2020kali浏览器汉化等配置

    0.修改搜索引擎 1. 2. 3.点击左侧搜索,输入language因为我已经修改为中文所以没有查询到结果 4点击搜索更多语言(未汉化未英文)找到chinese后添加 5.要将chinese上移到第一 ...

  9. Functional mechanism: regression analysis under differential privacy_阅读报告

    Functional mechanism: regression analysis under differential privacy 论文学习报告 组员:裴建新   赖妍菱    周子玉 2020 ...

  10. 题解 P5835 【 USACO19DEC Meetings S】

    前言 这道题目是道好题,想通了之后就可以把轻松这道题做出来. 正文 结论 先把一个结论写出来. 无论所有奶牛怎么走,它们的体重从左往右组成的序列是不会发生改变的. 这个结论简单地说明一下. 首先我们可 ...