效果图:

<!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. think php 未登录，禁止访问页面 + 退出登录

    1.首先在Local创建一个基类控制器 D:\PHP\phpstudy_pro\WWW\1906A\pyg>php think make:controller goods/Base --plai ...

  2. linux定时任务 - at定时任务

    at命令是一次性定时计划任务,at的守护进程atd会以后台模式运行,检查作业队列来运行作业.atd守护进程会检查系统上的一个特殊目录来获取at命令的提交的作业,默认情况下,atd守护进程每60秒检查一 ...

  3. mysql 完整备份和恢复

    mysql 完整备份和恢复   一.MySQL完整备份操作 1.直接打包数据库文件夹 创建数据库auth: MariaDB [(none)]> create database auth;Quer ...

  4. CF258D题解

    太厉害啦 首先做期望题最不能忘记的就是期望的线性性. 所以我们直接将全局逆序对对数拆成两个数其中一个比另一个大的期望(概率),设为 \(f[i][j]\),初值为 \([a_i>b_j]\). ...

  5. vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  6. ArcMap操作随记（8）

    1.构建两点之间连线 [构造视线] 2.编辑相邻多边形(边界等) [拓扑]工具条→[共享要素] 3.点要素空间分配 [创建泰森多边形]→[裁剪] 4.面要素空间分配 [要素转折点]→[创建泰森多边形] ...

  7. 空间插值生物X适宜性分析

    1 前言 这期博主将根据示例大概讲一下插值分析. 2 问题阐述 根据要求,完成以下操作: (1)请就以上条件确定此地区适合X的生活范围,并制作专题图.专题图内容要求以地形和水系作为背景,且给出适宜区域 ...

  8. TCP | 你真的懂 HTTP 吗？

    前言 Hello 大家好,我是 Sam Zhang. HTTP 相信是每个 Web 开发者都耳熟能详的名词了.但是,新手开发者想要完全理解 HTTP 协议却需要时间.这期视频,我就来带大家入门 HTT ...

  9. 张高兴的 Entity Framework Core 即学即用：（一）创建第一个 EF Core 应用

    写在前面 Entity Framework Core (EF Core) 是 .NET 平台流行的对象关系映射(ORM)框架.虽然 .NET 平台中 ORM 框架有很多,比如 Dapper.NHibe ...

  10. C++设计模式 - 迭代器模式（Iterator）

    数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...