<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * {margin: 0; padding: 0;}

    .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

    .clearfix:after {

      content: '.';

      display: block;

      height: 0;

      clear: both;

      visibility: hidden;

    }

    ul li {

      list-style: none;

      float: left;

      margin: 50px 0 50px 20px;

      text-align: center;

    }

    li {

      background: red;

    }

    h2 {

      margin-top: 20px;

    }

    .circle1 {

      width: 100px;

      height: 50px;

      border-radius: 50px 50px 0 0;

      line-height: 50px;

    }

    .circle2 {

      width: 50px;

      height: 100px;

      border-radius: 0 50px 50px 0;

      line-height: 100px;

    }

    .circle3 {

      width: 100px;

      height: 50px;

      border-radius: 0 0px 50px 50px;

      line-height: 50px;

    }

    .circle4 {

      width: 50px;

      height: 100px;

      border-radius: 50px 0 0 50px;

      line-height: 100px;

    }

    .circle5 {

      width: 100px;

      height: 100px;

      border-radius: 50px;

      line-height: 100px;

    }

    .demo { /*左半圆*/

      position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/

      width: 100px;

      height: 100px;

      border-radius: 50px;

      /* line-height: 50px; */

      clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/

    }

    .right-circle { /*右半圆*/

      left: 200px;

      clip: rect(0px 100px 100px 50px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/

    }

  </style>

</head>

<body>

  <div>

    <h2>用border-radius实现半圆</h2>

    <ul class="clearfix">

      <li class="circle1">上边圆</li>

      <li class="circle2">左边圆</li>

      <li class="circle3">下边圆</li>

      <li class="circle4">左边圆</li>

      <li class="circle5">全圆</li>

    </ul>

    <hr>

    <h2>css3的clip 方法剪裁实现半圆</h2>

    <p style="color: red;">clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。唯一合法的形状值是：rect (top, right, bottom, left)</p>

    <ul class="clearfix" style="position: relative;">

      <li class="demo">左半圆</li>

      <li class="demo right-circle">右半圆</li>

      <li></li>

    </ul>

  </div>

</body>

</html>

效果图：

感兴趣的朋友可以去熟试下！！！

css3画半圆的两种方法的更多相关文章

  1. Matlab画平滑曲线的两种方法

    自然状态下,用plot画的是折线,而不是平滑曲线. 有两种方法可以画平滑曲线,第一种是拟合的方法,第二种是用spcrv,其实原理应该都一样就是插值.下面是源程序,大家可以根据需要自行选择,更改拟合的参 ...

  2. Android 抗锯齿的两种方法

    Android 抗锯齿的两种方法 (其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true))   在Android中,目前,我知道有两种出现锯齿 ...

  3. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  4. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  5. Qt中显示图像的两种方法

    博客转载自:https://blog.csdn.net/lg1259156776/article/details/52325361 在Qt中处理图片一般都要用到QImage类,但是QImage的对象不 ...

  6. 【Qt开发】Qt中显示图像的两种方法对比

    在Qt中处理图片一般都要用到QImage类,但是QImage的对象不能够直接显示出来,要想能看到图片,初步发现有两种方法. 一.QImage转QPixmap,然后用QLabel::setPixmap( ...

  7. windows下获取IP地址的两种方法

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  8. android 之 启动画面的两种方法

    现在,当我们打开任意的一个app时,其中的大部分都会显示一个启动界面,展示本公司的logo和当前的版本,有的则直接把广告放到了上面.启动画面的可以分为两种设置方式:一种是两个Activity实现,和一 ...

  9. [转载]C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 by 大龙哥 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char ...

随机推荐

  1. 利用 Create React Native App 创建 React Native 应用

    $ npm i -g create-react-native-app $ create-react-native-app my-project $ cd my-project $ npm start

  2. 用 Python 加密文件

    生活中,有时候我们需要对一些重要的文件进行加密,Python 提供了诸如 hashlib,base64 等便于使用的加密库. 但对于日常学习而言,我们可以借助异或操作,实现一个简单的文件加密程序,从而 ...

  3. JDK源码那些事儿之LinkedBlockingDeque

    阻塞队列中目前还剩下一个比较特殊的队列实现,相比较前面讲解过的队列,本文中要讲的LinkedBlockingDeque比较容易理解了,但是与之前讲解过的阻塞队列又有些不同,从命名上你应该能看出一些端倪 ...

  4. 《你说对就队》第九次团队作业：【Beta】Scrum meeting 1

    <你说对就队>第九次团队作业:[Beta]Scrum meeting 1 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 < ...

  5. Sql中的left函数、right函数

    DB2中left()函数和right()函数对应oracle中的substr()函数 DB2 LEFT.RIGHT函数 语法:LEFT(ARG,LENGTH).RIGHT(ARG,LENGTH) LE ...

  6. centOS下实践查询版本/CPU/内存/硬盘容量等硬件信息

    更详细参考: https://blog.csdn.net/dream_broken/article/details/52883883 1.查看内存 DirectMap2M: 33544192 kB [ ...

  7. salt state.sls windows 传输文件

    salt 安装 - 传输文件  一.master  -- minion linux 下 master 拷贝到 minion 上 1.cp.get_file 拷贝文件 # salt '172.16.3. ...

  8. Ubuntu 系统安装ssh的命令

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"-- ...

  9. Firefox修復QQ快速登錄

    中了一次毒,然後火狐裏面就不能用QQ的快捷登錄了,後找到修復方法: 將QQ的四個文件放入火狐的插件文件夾裏面即可. 1.QQ文件目錄: C:\Program Files (x86)\Tencent\Q ...

  10. Java Web之Servlet及Cookie/Session

    Servlet参考文献: 1.http://www.cnblogs.com/luoxn28/p/5460073.html 2.http://www.cnblogs.com/xdp-gacl/p/376 ...