/*添加圆角   规律：顺时针方向

             一个值：代表四个方向

             二个值：左上+右下 / 右上+左下

             三个值：左上 / 右上+左下 / 右下

             四个值：左上/ 右上 / 右下/ 左下*/

             /*border-radius: 10px 30px 60px 100px;*/

             /*border-radius: 50%;*/

             /*border-radius: 0px 200px 0px 100%;*/

             /*为单个角的不同方向分别设置圆角*/

             /*border-top-right-radius: 50px 100px;

             border-top-left-radius: 50px 100px;

             border-bottom-right-radius: 50px 100px;

             border-bottom-left-radius: 50px 100px;*/

             /*border-top-right-radius: 50px;*/

             /*border-radius: 50px/100px;*/

             /*border-radius: 10px 20px 40px 80px/100px 40px 20px 10px;*/

其中，为每个角单独设置圆角：例如

border-top-right-radius : 50px 50px;
border-top-right-radius : 50px 100px;

一.一个值：代表四个方向

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 200px;

             background-color: red;

             border-radius: 40px;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

二.二个值：左上+右下 / 右上+左下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background-color: red;

            border-radius: 25% 50%;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

三.三个值：左上 / 右上+左下 / 右下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 200px;

             background-color: red;

             border-radius: 10% 50%  80%;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

四.四个值：左上/ 右上 / 右下/ 左下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background-color: red;

            border-radius: 10px 30px  60px  100px;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

H5C3--圆角的更多相关文章

  1. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  2. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  3. input标签中button在iPhone中圆角的问题

    1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...

  4. winform 窗体圆角设计

    网上看到的很多winform窗体圆角设计代码都比较累赘,这里分享一个少量代码就可以实现的圆角.主要运用了System.Drawing.Drawing2D. 效果图 代码如下. private void ...

  5. 自定义控件之 圆形 / 圆角 ImageView

    一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:       二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在 ...

  6. Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)

    Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...

  7. android ImageView网络图片加载、动态设置尺寸、圆角..

    封装了一个关于ImageView的辅助类,该类可以方便实现网络图片下载的同时,动态设置图片尺寸.圆角.....一系列连贯的操作,无样式表,java代码实现所有功能,使用很方便. package com ...

  8. CSS3 border-radius 圆角属性

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...

  9. android 自定义控件——（一）圆角按钮

    ----------------------------------矩形或圆角类型(源代码下有属性解释)------------------------------------------------ ...

  10. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

随机推荐

  1. 2019-8-31-dotnet-获取程序所在路径的方法

    title author date CreateTime categories dotnet 获取程序所在路径的方法 lindexi 2019-08-31 16:55:58 +0800 2019-03 ...

  2. vue项目中，单页图片过多，使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  3. 快速沃尔什变换(FWT) 与 快速莫比乌斯变换 与 快速沃尔什变换公式推导

    后面的图片将会告诉: 如何推出FWT的公式tf 如何推出FWT的逆公式utf 用的是设系数,求系数的方法! ============================================== ...

  4. 不用winio直接用c#函数实现模拟键盘

    原理来自:  http://blog.sina.com.cn/s/blog_71921a8e0100olaw.html /// <summary> /// 导入模拟键盘的方法 /// &l ...

  5. 关于公式文件.eqn

    建议默认打开该选项

  6. csp-s模拟测试61砖块, 数字,甜圈题解

    题面:https://www.cnblogs.com/Juve/articles/11626350.html 砖块: 直接模拟即可,map统计被覆盖的次数 #include<iostream&g ...

  7. DuiLib学习笔记2.写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

  8. php计算网段内所有IP，分配子网段

    由于最近业务需要,写了个获取网段内所有IP的函数,以及分配可用子网段的函数 /** * 根据网段获取计算所有IP * @param string $segment 网段 '139.217.0.1/24 ...

  9. centos安装gcc4.8.2

    1. 下载源码:镜像地址http://mirror.bjtu.edu.cn/gnu/gcc/gcc-4.8.2/gcc-4.8.2.tar.gz用svn下载可以随时更新到最新的版本svn checko ...

  10. centos7 yum 安装tomcat7

    查看yum中tomcat信息 yum info tomcat 安装 yum install tomcat 安装管理界面 yum install tomcat-webapps tomcat-admin- ...