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. 网页外链用了 target="_blank"，结果悲剧了

    今天给大家分享一个 Web 知识点.如果你有过一段时间的 Web 开发经验,可能已经知道了.不过对于刚接触的新手来说,还是有必要了解一下的. 我们知道,网页里的a标签默认在当前窗口跳转链接地址,如果需 ...

  2. 你知道吗，Flutter内置了10多种show

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 showDialog showDialog 用于弹出Mat ...

  3. Axure 文本框去掉边框 富文本 粘贴文字图标

    在今天做原型的过程中,碰到两个问题: 1 文本框该如何去掉边框 2 富文本粘贴文字图标 第一个问题:首先是思路错了,又跑到元件上面找边框,跑到style里面去border的线,结果是不成功. 正解:属 ...

  4. Java 14 开箱，它真香香香香

    Java 14 已经发布有一周时间了,我准备来开个箱,和小伙伴们一起来看看新特性里面都有哪些好玩的.我们程序员应该抱着尝鲜.猎奇的心态,否则就容易固步自封,技术停滞不前.先来看看 Java 14 都有 ...

  5. Web_Servlet—— Servlet生命周期

    第4章 Servlet生命周期(重要) 4.1 Servlet生命周期概述 1,应用程序中的对象不仅在空间上有层次结构的关系,在时间上也会因为处于程序运行过程中的不同阶段而表现出不同的状态和不同的行为 ...

  6. VS code调试代码快速上手必备知识

    一.通过简单的配置运行一个JavaScript程序 1.打开(创建)一个新的工作空间(文件夹),并创建一个js文件: var name='world'; var s='Hello,${name}!'; ...

  7. 跟面试官侃半小时MySQL事务隔离性，从基本概念深入到实现

    提到MySQL的事务,我相信对MySQL有了解的同学都能聊上几句,无论是面试求职,还是日常开发,MySQL的事务都跟我们息息相关. 而事务的ACID(即原子性Atomicity.一致性Consiste ...

  8. Asp.Net Core系列 电子书（摘自：Yaopengfei(姚鹏飞)）

    链接:https://pan.baidu.com/s/1uSmlArXinvNPKoLvck1hFg 提取码:34ce

  9. 大多数人不知道的表格其他写法的onmouseover效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. Contest 158

    2019-10-14 15:30:38 总体感受:这次依然很快搞定了前三题,最后一题乍看之下还是比较简单的,但是出奇多的corner case让我非常苦恼,这也让我意识到要想真正征服最后一题,还有一个 ...