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. Spring入门之四-------SpringIoC之其他知识点

    一.懒加载 public class Bean1 { public Bean1() { System.out.println(this.getClass().getSimpleName() + &qu ...

  2. node - 获取当前时间并格式化

    1,安装 moment模块 cnpm i moment --save 2,引入 var moment = require('moment'); 3,获取当前时间并格式化 var current_tim ...

  3. 指令——rm

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 指令:rm (remove,移除.删除) 作用 ...

  4. tensorflow学习笔记--dataset使用，创建自己的数据集

    数据读入需求 我们在训练模型参数时想要从训练数据集中一次取出一小批数据(比如50条.100条)做梯度下降,不断地分批取出数据直到损失函数基本不再减小并且在训练集上的正确率足够高,取出的n条数据还要是预 ...

  5. 第二阶段scrum-7

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 部署云服务器完成,链接数据库完成,消息收发正在制作.

  6. segger rtt 输出 log

    调试 mcu 的时候,使用 jlink 的 rtt 可以方便的输出信息. 输出有两种模式, client 和 logger. client 必须依附其他程序,比如说 mdk 调试状态,或者 logge ...

  7. 吴裕雄--天生自然C++语言学习笔记：C++ 运算符

    运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...

  8. python 网页爬虫 基础篇

    首先要连接自己的数据库 import pymysql import requests #需要导入模块 db = pymysql.connect('localhost', 'root', '****** ...

  9. 第六篇 ORM 操作大全

    阅读目录(Content) 一 对象关系映射ORM概念 二 Django连接MySQL 三modles.py创建表 常用字段 字段合集 字段参数 DateField和DateTimeField 四.关 ...

  10. SpringAOP 使用注解的简单使用

    1. 导入jar包 /SpringAOPmy/lib/com.springsource.net.sf.cglib-2.2.0.jar/SpringAOPmy/lib/com.springsource. ...