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. 英语语法 - the + 形容词 的意义

    1,表示一类人  (复数) the young 青年 the old 老年the poor 穷人 the rich 富人the sick 病人 The old need care more than ...

  2. js中const,val,let 的区别

    1. const定义的变量不可以修改,而且必须初始化. 2. var定义的变量可以修改,如果不初始化会输出undefined,不会报错. 3. let是块级作用域,函数内部使用let定义后,对函数外部 ...

  3. mjpg-streamer视频服务器移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y JPEG库的移植 对于内核linux-2.6.35,不能再使用servfox,如果要使用的需要修改大量的代码.在此选用新的 ...

  4. eclipse启动tomcat访问localhost:8080报404

    直接双击tomcat\bin目录下面的startup.bat启动 是没问题 的 但是eclipse启动tomcat访问localhost:8080报404 解决方案如下: 双击红色圈里面的tomcat ...

  5. cf 782# A.Andryusha and Socks B.The Meeting Place Cannot Be Changed C.Andryusha and Colored Balloons

    看来快掉到灰名的蒟蒻涨rating也快... A题模拟一下就好(一开始还sb,, #include<bits/stdc++.h> #define LL long long using na ...

  6. Java IO流学习总结（转）

    原文地址:http://www.cnblogs.com/oubo/archive/2012/01/06/2394638.html Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 ...

  7. POJ 2104 求序列里第K大 主席树裸题

    给定一个n的序列,有m个询问 每次询问求l-r 里面第k大的数字是什么 只有询问,没有修改 可以用归并树和划分树(我都没学过..囧) 我是专门冲着弄主席树来的 对主席树的建树方式有点了解了,不过这题为 ...

  8. HTMLCSS学习

    子选择器:第一代 .food>li{border:1px solid red;} 后代选择器:所有后代         .first  span{color:red;} 通用选择器:       ...

  9. 实验吧-密码学-他的情书(进一步了解js代码调试和console.log)

    打开网站,在白色背景下的任一点上点击鼠标,白色部分都会消失(包括password输入框),那么就无法输入. 查看源码,发现是明显的从源码解决问题. 火狐F12查看器查看源码(如果是简单的操作,可以vi ...

  10. tornado和vue的模板冲突解决方法

    tornado和vue的模板冲突解决方法 Vue的插值表达式和tornado的模板都为一对花括号,可以通过修改vue的插值表达式的符号来解决这个问题,具体方法如下: var vm = new Vue( ...