<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. c# CryptoStream 类

  2. centos7安装后，一些小优化

    1.设置静态ip vim /etc/sysconfig/network-scripts/ifcfg-ens33 将BOOTPROTO=dhcp修改为BOOTPROTO=static ONBOOT=no ...

  3. java 静态代码块和spring @value等注解注入顺序

      java 静态代码块和spring @value等注解注入顺序 问题所在 先上代码 java方法 @Value("${mf.cashost}") public static S ...

  4. Codeforces D. Powerful array（莫队）

    题目描述: Problem Description An array of positive integers a1, a2, ..., an is given. Let us consider it ...

  5. postscript打印机语言

    http://tongxinmao.com/Article/Detail/id/257

  6. js在点击的按钮下面弹框

    效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景 前端代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  7. DevExpress中实现GridControl的分页功能

    DevExpress中如何实现GridControl的分页功能 简介:DevExpress中如何实现GridControl的分页功能, 主要是利用DataNavigator和GridControl组合 ...

  8. scala 基础知识 FAQ

    问题1: 抽象成员初始化规则 ① 父类先初始化 ② 在初始化的过程中,如果 val 发生重写,只有最后一个重写生效.前面的会变成零值,后面的会直接继承. 参考资料:https://docs.scala ...

  9. BZOJ3277 串 和 BZOJ3473 字符串

    字符串 给定n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串? 分析 参照自为风月马前卒和Candy?的题解. 广义后缀自动机不就是把很多串的SAM建到了一个S ...

  10. git常用命令总结--原创

    0.git status 仓库状态1.git add 工作区-->暂存区2.git commit 暂存区-->版本库3.git log 查看日志4.git reset --hard hea ...