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. search（2）- elasticsearch scala终端：elastic4s

    上篇谈到:elasticsearch本身是一个完整的后台系统,对其的操作使用是通过终端api进行的.elasticsearch本身提供了多种编程语言的api,包括java的esjava.而elasti ...

  2. 还记得第一个看到的Flutter组件吗？

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MaterialApp 在学习Flutter的过程中我们第 ...

  3. appium移动自动化详解

    1移动自动化简介 移动自动化就是通过代码来控制手机,模拟人的动作,对手机进行一些点击,输入等操作,那python代码如何能控制到手机呢?目前的思路应该是python代码->Appium-pyth ...

  4. .NetCore 3.1 MVC 发布Linux实操

    记录自己.net Core的学习,现在来发布到Linux系统 第一步:准备一台CentOS 7 X64服务器 .net core 3.1项目 第二步:准备服务器.net core环境 1.安装微软官方 ...

  5. F-NAScan：一款网络资产扫描工具

    此脚本的大概流程为: ICMP存活探测-->端口开放探测-->端口指纹服务识别-->提取快照(若为WEB)-->生成结果报表 用法 python NAScan.py -h 10 ...

  6. Elasticsearch系列---使用中文分词器

    前言 前面的案例使用standard.english分词器,是英文原生的分词器,对中文分词支持不太好.中文作为全球最优美.最复杂的语言,目前中文分词器较多,ik-analyzer.结巴中文分词.THU ...

  7. 修改imx6ull开机LOGO（一）

    imx6ull启动的时候默认显示uboot自带的开机画面,按照如下步骤修改为我们想要的开机画面,如下: 首先去掉液晶屏右上角的打印信息   修改/drivers/video/cfb_console.c ...

  8. OpenCV-Python 相机校准 | 四十九

    目标 在本节中,我们将学习 由相机引起的失真类型, 如何找到相机的固有和非固有特性 如何根据这些特性使图像不失真 基础 一些针孔相机会给图像带来明显的失真.两种主要的变形是径向变形和切向变形. 径向变 ...

  9. C的变量类型、作用域与生命周期的总结

    C的变量类型.作用域与生命周期的总结 最近在看"C Programing Language" (Kernighan, Ritchie)关于外部变量的讨论,之前在学C的时候对这些ex ...

  10. 如何有效的阅读JDK源码

    阅读Java源码的前提条件: 1.技术基础 在阅读源码之前,我们要有一定程度的技术基础的支持. 假如你从来都没有学过Java,也没有其它编程语言的基础,上来就啃<Core Java>,那样 ...