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. ORIGIN（起源属性）路由起源骗术

    ORIGIN(起源属性)配置: ①:抓取感兴趣流量——prefix.access ②:创建route-map 流量地图——permit 10 ③:匹配感兴趣流量——match ④:设置起源属性——se ...

  2. Vulkan 之 Synchronization

    1.2之前定的版本采用 vkSemaphore和vkFence来进行同步, VkSemaphore allowed applications to synchronize operations acr ...

  3. 四十六、SAP的Message中E和W区别

    一.如果写的是E,则报红色的信息,如图 效果如下 二.如果是写的是W,则报黄色的信息 效果如下

  4. 148-PHP strip_tags函数，剥去字符串中的 HTML 标签（二）

    <?php //定义一段包含PHP代码的字符串 $php=<<<PHP 这里是PHP代码的开始 <?php echo "hello!"; PHP; $ ...

  5. 133-PHP子类无法重写父类private同名函数

    <?php class father{ //定义father类 //定义protected成员方法 protected function cook(){ return 'protected co ...

  6. Wdcp升级Php5.3成功

    在lanmp/wdcp/wdOS的当前版本中,默认的php都是用到5.2.17的版本如需要升级到php5.3的,可使用如下脚本升级(注:此升级无安全漏洞等原因,只为某些追求高版本或应用需求需要高版本, ...

  7. 控制台连接oracle11g报ORA-12560异常

    oracle11g R2 64bit oracleClient 11.2 32bit PL/SQL Developer 11.0.2 32bit 今天发现了一个奇怪的现象,如图: 后来发现机器上既有s ...

  8. SCA-CNN: Spatial and Channel-wise Attention in Convolutional Networks for Image Captioning

    题目:SCA-CNN: Spatial and Channel-wise Attention in Convolutional Networks for Image Captioning 作者: Lo ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-print

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. MySQLWorkbench注释

    不改变快捷键配置文件基础上 1. 通过菜单操作 Edit -> Format -> Un/comment 2. 键盘 (Windows 10, 其他操作系统未试过) Ctrl + /  ( ...