css--->圆角设置

2020-04-05 16:02:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

原文链接:https://www.cnblogs.com/abner-pan/p/12637924.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:课程《HTML 入门与实战》学习笔记分享

下一篇:表单元素