效果图:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>CSS3</title>

    <style>

        ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;background:red;text-align: center;}

        .circle1{width:100px;height:50px;border-radius:50px 50px 0 0}

        .circle2{width:50px;height:100px;border-radius: 0 50px 50px 0}

        .circle3{width:100px;height:50px;border-radius:0 0 50px 50px}

        .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px}

        .circle5{width:100px;height:100px;border-radius: 50px}

    </style>

</head>

<body>

    <ul>

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

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

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

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

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

    </ul>

</body>

</html>

css实现半圆效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

随机推荐

  1. Hystrix&Dashboard配置使用

    目录 Hystrix是什么 熔断 什么是熔断 熔断类型 打开 半开 关闭 使用方法 导包 添加启动注解 新增方法 测试 降级 什么是降级 使用方法 导包 修改yml,新增如下 启动类新增注解 @Ena ...

  2. Linux du命令和df命令区别

    du 命令 1．命令格式: du [选项][文件] 2．命令功能: 显示每个文件和目录的磁盘使用空间. 3．命令参数: -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文件大 ...

  3. TCP的粘包、拆包及解决方法

    TCP粘包,拆包及解决方法 粘包拆包问题是处于网络比较底层的问题,在数据链路层.网络层以及传输层都有可能发生.我们日常的网络应用开发大都在传输层进行,由于UDP有消息保护边界,不会发生粘包拆包问题,因 ...

  4. php 手动创建分页

  5. php 数组相关的函数？

    array()----创建数组array_combine()----通过合并两个数组来创建一个新数组range()----创建并返回一个包含指定范围的元素的数组compact()----建立一个数组a ...

  6. 使用Docker 部署MongoDB

    使用 Docker 部署 MongoDB 查看官网安装教程后感觉直接使用包管理器安装mongo比较复杂,本文主要介绍使用docker安装部署mongo的方法,并对基本配置项进行自定义.保姆式全程指导. ...

  7. SpringMVC工作流程 --通透较详细

    SpringMVC工作流程 SpringMVC工作流程 流程说明(重要): (1)客户端发送一个http请求给前端控制器(DispatcherServlet): (2)前端控制器(DispacherS ...

  8. Python GUI tkinter 学习笔记（一）

    第一个python程序 #!/usr/bin/python # -*- coding: UTF-8 -*- from Tkinter import * # 创建一个根窗口,其余的控件都在这个窗口之上 ...

  9. wifi钓鱼

    无线网络的加密方式和破解方式 1.WEP加密及破解 1).WEP加密方式 有线等效保密(wired euivalent pricacy,WEP)协议的使用RC4(rivest cipher4)串流加密 ...

  10. isro

    靶机准备 将下载的压缩文件解压,打开vmx文件即可 将网络模式设置为NAT 扫描获得ip:192.168.164.185 kali:192.168.164.137 netdiscover -r 192 ...