border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。例如:
.semicircle {
     
      margin: 30px;
    }
    .top {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
    }
    .right {
      height: 100px;/*高度为宽度的2倍*/
      width: 50px;
      border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
    }
    .bottom {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
    }
    .left {
      width: 50px;
      height: 100px;/*高度为宽度的2倍*/
      border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
    }

效果如图3-35所示。

border-radius制作半圆有两个小技巧:

制作上半圆或下半圆,元素的宽度值是高度值的2倍,而且圆角半径值为元素的高度值;

制作左半圆或右半圆,元素的高度值是宽度值的2倍,而且圆角半径值为元素的宽度值。

css3画半圆的更多相关文章

  1. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  2. css3画半圆 , 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  3. css3 画半圆和1/4圆

    半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...

  4. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  5. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  6. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  7. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  8. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  9. 如何用CSS3画出懂你的3D魔方?

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

随机推荐

  1. C,C++面试题2

    面试题1:变量的声明和定义有什么区别为变量分配地址和存储空间的称为定义,不分配地址的称为声明.一个变量可以在多个地方声明,但是只在一个地方定义.加入extern修饰的是变量的声明,说明此变量将在文件以 ...

  2. c# 跨线程访问窗体UI

    定义个结构体用于存储线程中传递的参数信息 struct ImgInfo { public string url; public string path; }; 参数传递到线程中 ImgInfo img ...

  3. linux命令之系统管理命令(下)

    1.chkconfig:管理开机服务 该命令为linux系统中的系统服务管理工具,可以查询和更新不同的运行等级下系统服务的启动状态. 选项 说明 --list(常用) 显示不同运行级别下服务的启动状态 ...

  4. depth深度

    du.tree.find ls -li find ./ -inum 1193220 | while read a ;do rm -f $a;done find ./ -size 0b -type f ...

  5. 原生态js展开高度自适应100%

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. php运行环境学习

    web服务器,负责响应客户端请求.对于静态页面请求,会立即返回相应页面给客户端:如果是动态页面,web服务器会根据 httpd.conf中的AddType配置,提交给合适的动态脚本解析程序预处理,然后 ...

  7. vue element-ui 表格筛选,点击筛选数据

    <el-table-column prop="productEnvVersion" label="运行环境" :filters="this.ru ...

  8. nginx负载均衡监测节点状态

    1. 安装nginx_upstream_check_module模块 我的实验环境是在/root 和 /application目录下都编译安装了nginx-1.6.3,然后在/root目录下建立一个文 ...

  9. Java-代理模式的理解

    引言 设计模式是语言的表达方式,它能让语言轻便而富有内涵.易读却功能强大.代理模式在Java中十分常见,有为扩展某些类的功能而使用静态代理,也有如Spring实现AOP而使用动态代理,更有RPC实现中 ...

  10. IOS面试题(二)

    50. 谈谈对Block 的理解?并写出一个使用Block执行UIVew动画? 答:Block是可以获取其他函数局部变量的匿名函数,其不但方便开发,并且可以大幅提高应用的执行效率(多核心CPU可直接处 ...