1.  /*添加圆角   规律：顺时针方向
  2.              一个值：代表四个方向
  3.              二个值：左上+右下 / 右上+左下
  4.              三个值：左上 / 右上+左下 / 右下
  5.              四个值：左上/ 右上 / 右下/ 左下*/
  6.              /*border-radius: 10px 30px 60px 100px;*/
  7.              /*border-radius: 50%;*/
  8.              /*border-radius: 0px 200px 0px 100%;*/
  9.  
  10.              /*为单个角的不同方向分别设置圆角*/
  11.              /*border-top-right-radius: 50px 100px;
  12.              border-top-left-radius: 50px 100px;
  13.              border-bottom-right-radius: 50px 100px;
  14.              border-bottom-left-radius: 50px 100px;*/
  15.              /*border-top-right-radius: 50px;*/
  16.              /*border-radius: 50px/100px;*/
  17.              /*border-radius: 10px 20px 40px 80px/100px 40px 20px 10px;*/

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

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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          div{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.              border-radius: 40px;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.  <div></div>
  17.  </body>
  18.  </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: red;
  11.             border-radius: 25% 50%;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div></div>
  17. </body>
  18. </html>

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          div{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.              border-radius: 10% 50%  80%;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.  <div></div>
  17.  </body>
  18.  </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: red;
  11.             border-radius: 10px 30px  60px  100px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <div></div>
  17. </body>
  18. </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. Ifconfig- Linux必学的60个命令

    1.作用 ifconfig用于查看和更改网络接口的地址和参数,包括IP地址.网络掩码.广播地址,使用权限是超级用户. 2.格式 ifconfig -interface [options] addres ...

  2. 【2011集训贾志鹏】Crash 的数字表格

    题面 题目分析 (默认\(n<m\)) 题目要求\(\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)\). 由\(lcm(i,j)=\frac{i\c ...

  3. js获取json的健与值

    let myObj = { name: '张三', age: 18,sex:'女' } let tempArr = Object.keys(myObj) console.log(tempArr) fo ...

  4. 廖雪峰Java13网络编程-1Socket编程-1网络编程概念

    1.计算机网络 1.1 什么是计算机网络? 两台或更多计算机组成的网络 同一网络内的任意2台计算机都可以直接通信 所有计算机必须遵循同一种网络协议 1.2 什么是互联网 互联网是网络的网络 互联网采用 ...

  5. STL vector容器需要警惕的一些坑

    从迭代器中取值切记需要判断是否为空 例如: vector<int> vtTest; vtTest.clear(); if (vtTest.empty()){ ; } ]; 如果没有忘了判断 ...

  6. 在自己的工程中使用开源界面库Duilib

    配置duilib库 一个简单的使用Duilib程序一般要在stdafx.h中进行配置(链接duilib的文件,包括头文件).通常的配置代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  7. JavaSE_11_File类、递归

    1.1 概述File类 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 1.2 构造方法 public File(String pathname ...

  8. C#可扩展编程之MEF(五)：MEF高级进阶

      好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较 ...

  9. Docker系列(十六)：搭建Openshift环境

    目的: 搭建Linux下的Openshift环境. 参考资料: 开源容器云OpenShift 构建基于Kubernetes的企业应用云平台 ,陈耿 ,P253 ,2017.06 .pdf 下载地址:h ...

  10. [原创]mysql 5.6安装配置,主从分离,读写分离简单教程

    文章中参考使用了多个博客的资料,汇总而成!其流程准确性被人亦本人实践! https://blog.csdn.net/qq_35206261/article/details/81321201 https ...