<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. java对象json序列化时忽略值为null的属性

    环境: jdk: openjdk11 操作系统: windows 10教育版1903 目的: 如题,当一个对象里有些属性值为null 的不想参与json序列化时,可以添加如下注解 import com ...

  2. 为openstack制作CoreOS虚拟机镜像(基于CoreOS官方提供镜像)

    OpenStack源码交流群: 538850354 1.下载CoreOS镜像(633.1.0版本) CoreOS官网已经有openstack使用的虚拟机镜像,可以直接下载,然后进行修改 http:// ...

  3. maven报错找不到依赖

    遇到一个巨坑 跑公司的一个项目,拉下来代码,跑不起来.发现maven一直报这个错 was cached in the local repository,resolution will not be r ...

  4. Spring -10 -<bean>的 scope 属性 -singleton 默认值/prototype 多例 /request /session /application /global session

    1.<bean>的属性; 2.作用:控制对象有效范围(单例,多例等)3.<bean/>标签对应的对象默认是单例的. 3.1无论获取多少次,都是同一个对象 Teacher t1 ...

  5. 大数据之路week07--day05 （Hive的搭建部署）

    在之前博客中我有记录安装JDK和Hadoop和Mysql的过程,如果还没有安装,请先进行安装配置好,对应的随笔我也提供了百度云下载连接. 安装JDK:   https://www.cnblogs.co ...

  6. 《你说对就队》第八次团队作业：Alpha冲刺 第二天

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

  7. 1-html基本结构与编写规范

    <!DOCTYPE html> <html> <!-- #前端开发系统化学习教程, #包括html.css.pc端及移动端布局技巧.javascript. #jquery ...

  8. RCNN,Fast RCNN,Faster RCNN 的前生今世：（1） Selective Search

    Selective Search for Object Recoginition 这篇论文是J.R.R. Uijlings发表在2012 IJCV上的一篇文章,主要介绍了选择性搜索(Selective ...

  9. [JSOI2018]战争

    题目描述 九条可怜是一个热爱读书的女孩子. 在她最近正在读的一本小说中,描述了两个敌对部落之间的故事.第一个部落有 nnn 个人,第二个部落有 mmm 个人,每一个人的位置可以抽象成二维平面上坐标为 ...

  10. 【贪心】Communication System POJ 1018

    题目链接:http://poj.org/problem?id=1018 题目大意:有n种通讯设备,每种有mi个制造商,bi.pi分别是带宽和价格.在每种设备中选一个制造商让最小带宽B与总价格P的比值B ...