精华内容
下载资源
问答
  • html 圆角
    千次阅读
    2020-10-19 21:02:36

    圆角

    通过border-radius为盒子设置圆角孤度

    语法:

    设置一个值:
    	border-radius:10px;
    设置四个值:
    	border-radius: 左上 右上 右下 左下;
    设置两个值:
    	border-radius:左上右上   右下左下;
    

    原理:
    圆角的孤度 是圆的半径决定
    在这里插入图片描述
    属性值:数字(100px)或 百分比(50%)

    特殊形状

    圆形:盒子为正方形情况下,盒子的border-radius 值为 50%;
    椭圆: 盒子为长方型情况下,将盒子的 border-radius 值 设为 50%;
    例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                width: 800px;
                height: 800px;
                background-color: #f2f2f2;
            }
            
            .box-1 {
                width: 219px;
                height: 100px;
                background-color: green;
                border-radius: 130px 130px 0px 0px;
                position: relative;
                top: 20px;
                left: 250px;
            }
            
            .box-2 {
                width: 15px;
                height: 15px;
                background-color: #ffffff;
                border-radius: 130px 130px;
                position: relative;
                top: -25px;
                left: 305px;
            }
            
            .box-3 {
                width: 15px;
                height: 15px;
                background-color: #ffffff;
                border-radius: 130px 130px;
                position: relative;
                top: -41px;
                left: 395px;
            }
            
            .box-4 {
                width: 220px;
                height: 180px;
                background-color: green;
                position: relative;
                left: 250px;
                border-radius: 0px 0px 20px 20px;
            }
            
            .box-5 {
                width: 40px;
                height: 150px;
                background-color: green;
                position: relative;
                left: 200px;
                top: -175px;
                border-radius: 10px 10px 10px 10px;
            }
            
            .box-6 {
                width: 40px;
                height: 150px;
                background-color: green;
                position: relative;
                left: 480px;
                top: -325px;
                border-radius: 10px 10px 10px 10px;
            }
            
            .box-7 {
                width: 40px;
                height: 80px;
                background-color: green;
                position: relative;
                left: 285px;
                top: -290px;
                border-radius: 10px 10px 10px 10px;
            }
            
            .box-8 {
                width: 40px;
                height: 80px;
                background-color: green;
                position: relative;
                left: 390px;
                top: -370px;
                border-radius: 10px 10px 10px 10px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <div class="box-3"></div>
            <div class="box-4"></div>
            <div class="box-5"></div>
            <div class="box-6"></div>
            <div class="box-7"></div>
            <div class="box-8"></div>
        </div>
    </body>
    
    </html>
    

    效果图:
    在这里插入图片描述

    更多相关内容
  • css圆角属性是什么

    2021-06-12 14:05:43
    css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角圆角属性即 border-radius ...

    css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角。

    7204429e31a60ab7764d22fd59a02958.png

    圆角属性即 border-radius 属性,通过该属性我们可以给任何元素制作 "圆角"。

    (学习视频分享:java视频教程)border-radius 所有四个边角 border-*-*-radius 属性的缩写

    border-top-left-radius 定义了左上角的弧度

    border-top-right-radius 定义了右上角的弧度

    border-bottom-right-radius 定义了右下角的弧度

    border-bottom-left-radius 定义了左下角的弧度

    如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

    但是,如果你要在四个角上一一指定,可以使用以下规则:

    四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

    三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

    两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

    一个值: 四个圆角值相同

    以下为三个实例:

    1、四个值 - border-radius: 15px 50px 30px 5px:

    d6f04e6d074cc0a626493b671a6fa8cb.png

    2、三个值 - border-radius: 15px 50px 30px:

    c215acee040752bfd7a4656c01eb9aa6.png

    3、 两个值 - border-radius: 15px 50px:

    f5f9b5aee8f51957df1dd6948d20e976.png

    代码示例:#rcorners4 {

    border-radius: 15px 50px 30px 5px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

    }

    #rcorners5 {

    border-radius: 15px 50px 30px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

    }

    #rcorners6 {

    border-radius: 15px 50px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

    }

    相关推荐:CSS教程

    展开全文
  • 主要介绍了Android自定义View实现带4圆角或者2圆角的效果,本文通过实例代码截图给大家展示的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧。 示例代码 一、通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f...
  • wxpython绘制圆角窗体

    2020-09-18 11:14:41
    主要为大家详细介绍了wxpython绘制圆角窗体,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • div css圆角代码各种圆角表格_圆角边框css圆角
  • 主要为大家详细介绍了Winform窗体圆角设计代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Android设置图片圆角的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 易语言窗口圆角效果

    2020-07-21 11:23:26
    易语言窗口圆角效果源码,窗口圆角效果,窗口圆角化,CreateRoundRectRgn,SetWindowRgn,DeleteObject
  • 这是一个oc 实现圆角的方法
  • 主要为大家详细介绍了android自定义imageview实现圆角图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要给大家介绍了关于Android切圆角的常见方式,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • Android开发中,需要用到圆角背景,这里写了使用xml创建,代码创建圆角背景,代码修改已有的圆角背景..等.https://blog.csdn.net/forwardyzk/article/details/100669572
  • C#画圆角矩形的方法

    2020-09-03 17:56:20
    主要介绍了C#画圆角矩形的方法,涉及C#绘图的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Android生成带圆角的Bitmap图片,涉及Android通过Canvas实现绘制带圆角的图片相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • Android 自定义imageview实现图片圆角,圆形图片,椭圆形图片,不需要添加依赖,简洁实现
  • 主要为大家详细介绍了flutter Container容器实现圆角边框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角...
  • 本文实例讲述了Android开发圆角Button按钮实现过程,分享给大家供大家参考,具体内容如下 需求及效果图: 实现思路: 1、shape实现圆角 在drawable新建两个xml 文件, 这两个 xml文件用shape 实现了圆角效果。 Note:...
  • 目前一些比较火的图片加载库虽然支持圆角加载,若你是接的别人作了一半的项目,刚好别人用的图片加载库刚好不支持圆角加载,那么这颗控件你值得拥有.(支持网络图片的加载) 1.创建CustomImageView 类在你的项目中(源码...
  • Java 实现的 Android 原生圆角矩形控件,圆角 FrameLayout 和圆角 ImageView, 详见项目代码中的 RoundFrameLayout 和 RoundImageView。 更新日志 界面预览 使用 Gradle依赖: implementation '...
  • 用jquery实现的图片圆角效果代码。
  • 实现任意view经过自定义带4圆角或者2圆角的效果 2 原理 1) 实现view 4圆角 我们只需要把左边的图嵌入到右边里面去,最终显示左边的图就行。 2) 实现view上2圆角 我们只需要把左边的图嵌入到右边里面去,最终显示...
  • 在开发过程中有时需要将图片显示成圆角图片,一般我们可以通过在xml中设置drawable shape即可,但今天我给出另一种方法,用java代码动态去设置圆角,顺便做个简单的笔记。 主要原理是使用系统自带api: ...
  • 下面小编就为大家分享一篇Android 快速绘制一个圆角矩形的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 圆角输入框

    2018-08-29 09:19:55
    winfrom程序中美化TextBox控件,实现圆角,可带图片,具体可以下载根据代码调试,本代码中图片在后面,也可调至文本框前面
  • Glide加载圆形图片和自定义圆角图片,可自己设置圆角大小,可以对指定的角进行加载圆角,自定义圆角大小
  • QT QDialog 圆角实现

    2018-04-02 12:06:59
    QDialog 使用css 设置一个对话框为圆角。主要思路是QDialog为一个容器,设置透明后,要对里面的控件进行设置圆角

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 163,116
精华内容 65,246
关键字:

圆角是啥