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. asp.net增加指定404页面

    对于在asp中添加404页面我并不熟悉,所以刚开始只能在网上找各种资料,网上资源太多,各种借鉴.   1.借鉴网上尝试的第一种方法:   首先,修改应用程序根目录的设置,打开 “web.config” ...

  2. Web安全测试学习笔记 - vulhub环境搭建

    Vulhub和DVWA一样,也是开源漏洞靶场,地址:https://github.com/vulhub/vulhub 环境搭建过程如下: 1. 下载和安装Ubuntu 16.04镜像,镜像地址:htt ...

  3. 【WPF学习】第二十四章 基于范围的控件

    WPF提供了三个使用范围概念的控件.这些控件使用在特定最小值和最大值之间的数值.这些控件——ScrollBar.ProgressBar以及Slider——都继承自RangeBase类(该类又继承自Co ...

  4. 七十二、SAP中内表的修改，添加条件语句，多条目修改

    一.代码如下 二.MODIFY执行前断点数据 三.查看到数据如下 四.往下单步走一步,发现有3条数据被修改 五.执行后修改如下

  5. Spring开发环境搭建（Eclipse）

    开发环境搭建,主要包含2部分: Java安装 Eclipse安装 为易于学习,我们只安装这2个部分,对于一般开发学习也足够了.如果你有其他要安装的,酌情添加. Java安装 我们使用Java8: 下载 ...

  6. python函数-迭代器&生成器

    python函数-迭代器&生成器 一.迭代器 1 可迭代协议 迭代:就是类似for循环,将某个数据集内的数据可以“一个挨着一个取出来” 可迭代协议: ① 协议内容:内部实现__iter__方法 ...

  7. HTTP TCP UDP ICMP IP ARP 协议详解（10.15 第二十一天）

    ARP协议 ARP(Address Resolution Protocol)协议 地址解析协议 把网络层的IP地址翻译成在数据链路层寻址的48位硬件地址(MAC地址) 在OSI模型中ARP协议属于链路 ...

  8. vnpy交易学习接口(2)

    #来源于github下载vnpy版本  20180413 11.多投资标的情况下,该如何修改? 10.stop和limit报单有什么区别呢? 在交易时用得最多的是二类定单,第一类是市价单(Market ...

  9. 用AD 输出BOM时提示failed to open excel template

    解决办法: 去掉这个√!

  10. 大数据高可用集群环境安装与配置（10）——安装Kafka高可用集群

    1. 获取安装包下载链接 访问https://kafka.apache.org/downloads 找到kafka对应版本 需要与服务器安装的scala版本一致(运行spark-shell可以看到当前 ...