css--->为元素创建圆角

2020-04-05 17:02:09 阅读：225 来源： 互联网

标签：圆角创建 100px height 半径大小 radius border css

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>

标签：圆角,创建,100px,height,半径大小,radius,border,css
来源： https://www.cnblogs.com/abner-pan/p/12637924.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css--->为元素创建圆角