1.圆角的使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 100px;

             border: 1px solid red;

             background-color: red;

             /*添加圆角*/

             /*border-radius:10px;   一个值是四个角都一样*/

             /*border-radius:10px 30px;

             第一个值左上  右下  第二个值右上   左下*/

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

             第一个值是左上  第二个值是右上  和左下  第三个值是右下*/

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

                遵循左上  右上  右下  左下的顺序*/

             /*添加椭圆*/

             /*border-radius:100px/50px

             添加/是用来设置当前不同方向的半径

             水平方向x轴/垂直方向y轴

             */

             border-radius:100px/50px;

             /*添加某个角的圆角*/

             /*border-top-left-radius: 10px;*/

             /*设置某个角的不同方向上的不同圆角值*/

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

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

             /*若果四个角的不同方向上的不同圆角值

             分别是

             水平方向的：左上  右上  右下  左下/垂直方向：左上  右上  右下  左下

             */

             border-radius: 100px 80px 70px 60px/20px 50px 80px 90px;

         }

     </style>

 </head>

 <body>

 <div></div>

 </body>

 </html>

2.安卓机器人小案例：结合伪元素实现

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             height: 0;

         }

         .content{

             width: 500px;

             height: 500px;

             border: 1px solid red;

             margin: 50px auto;

         }

         .an_header{

             width: 250px;

             height: 125px;

             background-color: green;

             margin: 10px auto;

             border-radius: 125px 125px 0 0;

             position: relative;

         }

         .an_header::before,.an_header::after{

             content: "";

             width: 20px;

             height: 20px;

             border-radius: 10px;

             background-color: #fff;

             position: absolute;

             bottom: 40px;

         }

         .an_header::before{

             left: 70px;

         }

         .an_header::after{

             right: 70px;

         }

         .an_body{

             width: 250px;

             height: 250px;

             background-color: green;

             border-radius: 0 0 20px 20px;

             margin: 0px auto;

             position: relative;

         }

         .an_body::before,

         .an_body::after{

             content: "";

             width: 30px;

             height: 180px;

             position: absolute;

             background-color: green;

             top: 30px;

             border-radius: 10px;

         }

         .an_body::before{

             left: -40px;

         }

         .an_body::after{

             right: -40px;

         }

         .an_footer{

             width: 250px;

             height: 100px;

             margin: 0px auto;

             position: relative;

         }

         .an_footer::before,

         .an_footer::after{

             content: "";

             width: 30px;

             height: 90px;

             position: absolute;

             background-color: green;

             top: 0px;

             border-radius: 0 0 10px 10px;

         }

         .an_footer::before{

             left: 50px;

         }

         .an_footer::after{

             right: 50px;

         }

     </style>

 </head>

 <body>

 <div class="content">

     <div class="an_header"></div>

     <div class="an_body"></div>

     <div class="an_footer"></div>

 </div>

 </body>

 </html>

效果图：

h5-圆角的使用-案例安卓机器人的更多相关文章

  1. MFC简单绘制安卓机器人

    原始日期:2014-03-29 20:35 众所周知,google的安卓机器人形象十分经典,包括眼睛的位置,胳膊以及天线的位置都是有固定位置和比例的,而且是最恰当的,看起来最美.而微软基础类库MFC绘 ...

  2. H5外包团队 2019案例更新

    H5外包团队 2019案例更新 本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企 ...

  3. H5页面中判断是安卓手机还是ios手机的方法；APP页面中嵌套的H5跳转到APP其他页面的方法。

    (一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu ...

  4. H5移动端项目案例、web手机微商城实战开发

    自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...

  5. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  6. h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例

    html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...

  7. css3 特效拓展 画个安卓机器人

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 将h5用HBuilderX打包成安卓app后，document.documentElement.scrollTop的值始终为0或者document.body.scrollTop始终为0

    let time = setInterval(() => { let scroll = document.documentElement.scrollTop || document.body.s ...

  9. 【Android】我有放入Icon到mipmap，但不显示，只显示安卓机器人Icon（Android 8.0 图标适配）

    首先,放上别人写的博客,而我自己的博客,只会写大概思路,给自己留给备忘 https://blog.csdn.net/guolin_blog/article/details/79417483 其实会发生 ...

随机推荐

  1. bzoj 3696: 化合物

    哦,这个困惑了我好久的东西——生成函数(母函数),(然而拿这个东西去向学文化课的同学装逼并不成功...) 生成函数,就是把原来的加法组合变成乘法的指数加法,那么我们要求的值就是相应的指数的系数的值啦, ...

  2. .NET 一次读取几百条数据优化，从原来30分钟优化到30秒

    1.全部数据读取到内存, 不要使用string,而是使用stringbuilder,stringbuilder的效率非常高 2.添加到数据库 不要使用excute,而是使用事务,几百万条数据会请求数据 ...

  3. Java 归并排序

    package cookie; public class MergeSort { void mergeSort(int[] a, int[] temp, int left, int right) { ...

  4. log4j 打印日志

    # Set log levels #     设置日志级别 log4j.rootLogger = INFO, DebugFile,Console, LogFile, ErrorFile ## Disa ...

  5. 自定义jqGrid编辑功能，当行获取焦点时编辑，失去焦点时保存

    http://www.360doc.com/content/17/0719/15/9200790_672577533.shtml /********************************** ...

  6. WebApi发布IIS404

    1.确定访问路径有没有问题,路由的设置: 2.配置文件中要加 <modules runAllManagedModulesForAllRequests="true" /> ...

  7. 面向对象第一个特征-封装(Encapsulation)

    面向对象第一个特征-封装(Encapsulation) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.封装概述(Encapsulation) 1>.什么是封装 是指隐藏对 ...

  8. 吴裕雄--天生自然C++语言学习笔记：C++ 常量

    常量是固定值,在程序执行期间不会改变.这些固定的值,又叫做字面量. 常量可以是任何的基本数据类型,可分为整型数字.浮点数字.字符.字符串和布尔值. 常量就像是常规的变量,只不过常量的值在定义后不能进行 ...

  9. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：Spring实例化Bean的三种方法

    在面向对象的程序中,要想调用某个类的成员方法,就需要先实例化该类的对象.在 Spring 中,实例化 Bean 有三种方式,分别是构造器实例化.静态工厂方式实例化和实例工厂方式实例化. 构造器实例化 ...

  10. 面向对象变成（OOP）-创建类和使用类

    1.1.1对象的抽象:抽象是一种归纳或总结,对象是现实世界物体特征的实例. (1)一切皆是对象. (2)类是对象的抽象. 1.1.2 对象的使用: 当对象被抽象为类以后,就可以创建具体的实例来操作了. ...