<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语言来一发

    #include <stdio.h> #include <stdlib.h> #define HEAP_SIZE 100 #define HEAP_FULL_VALUE -10 ...

  2. linux系统编程之信号(二)

    经过了漫长的间歇,对于c语言的学习也被中断了很久,现实确实有很多的无耐,计划中的事情总会被打乱,但不管怎样,学习的道路是不能休止的,所以经过了一断温习后现在继续学习C语言,话不多说,进入正题: 信号分 ...

  3. 配置数据源和配置jpa的yml文件

    spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver username: root password: root url: j ...

  4. gradle 构建scala程序

    一.build.gradle 二.gradle build ===================== 执行scala scala main.scala

  5. HDU - 6125： Free from square （状压DP+分组背包）

    problem:给定N,K.表示你有数1到N,让你最多选择K个数,问有多少种方案,使得选择的数的乘积无平方因子数.N,K<500: solution:显然可以状压DP做,但是500以内的素数还是 ...

  6. HtmlAgilityPack解析html文档

    一.概述 HtmlAgilityPack(以下简称HAP)是一个基于.Net的.第三方免费开源的微型类库,主要用于在服务器端解析html文档. HtmlAgilityPack为网页提供了标准的DOM ...

  7. Python文件的读写操作

    Python文件的使用 要点:Python能够以文本和二进制两种形式处理文件. 1.文件的打开模式,如表1:  注意:使用open()函数打开文件,文件使用结束后耀使用close()方法关闭,释放文件 ...

  8. Python凯撒密码和括号匹配

    1.凯撒密码: 除了特殊字符不转化,其余的按照规定经行转译,以下以a~z和A~Z的字符都进行转译. plaincode = input("")print(len(plaincode ...

  9. python的种类有哪些？

    CPython 当我们从Python官方网站下载并安装好Python 3.6后,我们就直接获得了一个官方版本的解释器:CPython.这个解释器是用C语言开发的,所以叫CPython.在命令行下运行p ...

  10. 高级接口--OAuth2.0网页授权

    官方文档 Auth是一个开放协议,允许用户让第三方应用以安全且标准的方式获取该用户在某以网站,移动或桌面应用上存储的司名的资源(如用户个人信息,照片,视频,联系人列表),而无需将用户名和密码提供给第三 ...