<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. Linux实验：ssh免密码配置

    [实验目的]    1)了解ssh工具的作用    2)熟悉ssh配置过程    3)理解ssh原理[实验原理]    SSH是目前比较可靠的专为远程登录会话和其他网络服务提供安全的协议.不同主机之间 ...

  2. centos7小命令

    修改时区:timedate [root@centos2 ~]# timedatectl set-timezone Asia/Shanghai 修改语言:localectl [root@centos2 ...

  3. Python 中 plt 画柱状图和折线图

    1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...

  4. windows 10 下部署WCF 一些细节

    总体上在IIS中部署一个WCF服务和Win7没有什么区别 但是,如果你使用的是.NET 4.5开发的 WCF服务,而windows10 又安装了.net 4.7 那么你需要注意下面问题

  5. 利用Python3的requests和re库爬取猫眼电影笔记

    以下笔记,作为参考借鉴,如有疑问可以联系我进行交流探讨! 代码思路很简单,简单概括为:   首先利用requests的get方法获取页面的html文件,之后对得到的html文件进行相对应的正则处理,然 ...

  6. dt6.0之mip改造-img正则替换mip-img

    最近没事,打算把自己的小项目改造为mip,进行测试学习,想把资讯栏目:http://zhimo.yuanzhumuban.cc/news/.全部改造为mip.但是MIP改造一项是:图片标签的改造.而且 ...

  7. css cursor效果图

    效果图: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=& ...

  8. C语言蓝桥杯比赛原题和解析

    蓝桥杯:在计算机编程领域,是具有一定含金量的竞赛,用于选拔信息技术人才. 一般分为多个领域,其中包含了C/C#/C++/Java/Python等编程语言的测试题,多为算法的设计题. 下面,在搜题过程中 ...

  9. python的拷贝方式以及深拷贝，浅拷贝详解

    python的拷贝方法有:切片方法, 工厂方法, 深拷贝方法, 浅拷贝方法等. 几种方法都可以实现拷贝操作, 具体区别在于两点:1.代码写法不同. 2.内存地址引用不同 代码演示: import co ...

  10. 错误信息： Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException:

    这个错误主要原因是:数据库的配置出问题,比如写错库名什么的,仔细检查下.