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源码分析(四) net包获取主机ip 子网掩码相关分析

    获取本地的ip时 顺便学习了下标准库net中的实现 在net/interface.go中进行了入口调用,返回值为Addr的slice func InterfaceAddrs() ([]Addr, er ...

  2. 同网页的WebRTC实现与源码分析

    基本按照Real time communication with WebRTC搭建(下面简称该网站为官方tutorial) 本文重视WebRTC的基于同页面通信的代码实现,主要讲述顺序是WebRTC的 ...

  3. docker-ce 在windows10下使用volume的注意事项

    最近想搭建一套CI/CD环境尝试一下,因为手里云服务太小了(1C1G),撑不起来gitlab和jenkins.恰巧年前配了台高配版的windows机器,就想在家里的机器上通过docker装gitlab ...

  4. Sqli-labs 搭建SQL注入平台

    sqli-labs是一款学习sql注入的开源平台,共有75种不同类型的注入. 搭建步骤: 1.在Windows系统中安装WAMP 下载地址:https://pan.baidu.com/s/1HY0hF ...

  5. 部署harbor以https模式和k8s对接

    集群时间同步 我们在之前的kubeasz部署高可用kubernetes1.17.2 并实现traefik2.1.2部署篇已经实现了基于chrony的时间同步 [root@bs-k8s-master01 ...

  6. Linux下安装Python3.4

    PS:如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!!!! 不要动现有的python2环境! 1. ...

  7. Java中内部类和静态内部类的区别

    内部类和静态内部类 示例 public class OuterClass { private int numPrivate = 1; public int numPublic = 2; public ...

  8. jwt(JSON Web Tokens)的一道题目代码分析

    题目链接https://github.com/wonderkun/CTF_web/tree/5b08d23ba4086992cbb9f3f4da89a6bb1346b305/web300-6 参考链接 ...

  9. R之Shiny学习笔记

    官方教程:https://shiny.rstudio.com/tutorial/ 中文教程:http://yanping.me/shiny-tutorial/ 英文教程:https://deanatt ...

  10. Linux_virtualenv常用命令

    创建虚拟环境:mkvirtualenv -p python3 虚拟环境名称,创建后默认进入虚拟环境 查看当前虚拟环境安装的python包:pip list 查看已经创建的虚拟环境:workon + 两 ...