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

             一个值：代表四个方向

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

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

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

             /*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. html---三列布局

    三列布局 1一 1.两边固定 当中自适应 2.当中列要完整显示 3.当中列要优先加载 <!DOCTYPE html> <html> <head> <meta ...

  2. 深入理解Java虚拟机（类文件结构）

    深入理解Java虚拟机(类文件结构) 欢迎关注微信公众号:BaronTalk,获取更多精彩好文! 之前在阅读 ASM 文档时,对于已编译类的结构.方法描述符.访问标志.ACC_PUBLIC.ACC_P ...

  3. CSS3 学习笔记（动画 多媒体查询）

    动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 ...

  4. HTML值改变事件

    1.动态拼接html[表格中,如bootstrap grid] return '<input type="text" name="bjce" onchan ...

  5. 洛谷P2526 【SHOI2001】小狗散步

    原题传送门 题目背景 Grant喜欢带着他的小狗Pandog散步.Grant以一定的速度沿着固定路线走,该路线可能自交.Pandog喜欢游览沿途的景点,不过会在给定的N个点和主人相遇.小狗和主人同时从 ...

  6. Zuul的容错与回退与Zuul的高可用

    容错与回退 复制zuul项目,修改ArtifactId 如zuul-falllback 写Zuul的回退类 @Component public  class ZuulFallBackProvider ...

  7. Android基础控件RatingBar星级评分条的使用

    1.简介 RatingBar继承ProgressBar,除了ProgressBar的属性外还有特有属性: android:isIndicator:是否用作指示,用户无法更改,默认false andro ...

  8. 【转载】unittest总结

    本文转载链接:http://www.cnblogs.com/yufeihlf/p/5707929.html unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执 ...

  9. idea 开始java之旅

    1.安装idea 2018.3.5 https://www.jetbrains.com/idea/ 2.破解安装教程 https://blog.csdn.net/qq_34668897/article ...

  10. MySQL5.6 community从下载到安装

    一, 官网下载: https://www.mysql.com/downloads/      二, 安装过程 1, 双击打开 安装 这里是进行数据库配置: 端口默认为3306 这里我们更改为1207 ...