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

             一个值：代表四个方向

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

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

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

             /*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. MapReduce各个执行阶段

  2. 阿里云 Aliplayer高级功能介绍(四)：直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

  3. 一台电脑同时添加git和bitbucket两个网站的ssh key

    添加第一个ssh key 就不多说了,不懂的可以自己查资料 ssh-keygen -t rsa -C 'email_1@email.com' 然后一路enter就好了 假设已经添加好了git的ssh ...

  4. php中date() 函数

    实例 格式化本地日期和时间,并返回格式化的日期字符串: <?php // Prints the day echo date("l") . "<br>&q ...

  5. fiddler报错：creation of the root certificate was not successful 证书安装不成功

    fiddler提示:creation of the root certificate was not successful 证书安装不成功 首先 找到Tools——>Options 在弹出的菜单 ...

  6. c语言学习笔记 - 指针和字符串

    前面学习了字符串是一种字符数组,又知道了指针变量和数组的关系,这里来看一下指针和字符串的关系. #include <stdio.h> int main(void){ char str = ...

  7. linux 编译安装php选项

    PHP安装 ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc --with-mysql=/u ...

  8. Object.keys()应用

    <script type="text/javascript"> var person={ firstName:"David", lastName:& ...

  9. 深入浅出Mybatis系列（二）---配置简介（mybatis源码篇）[转]

    上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...

  10. MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]

    前面的文章我们已经在本机安装好了maven,同时在myeclipse中配置好了maven的插件. 链接如下: Maven安装----在Windows上安装Maven myeclipse安装maven插 ...