效果图:

<!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. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  2. 【转载】深入浅出SQL Server中的死锁

    essay from:http://www.cnblogs.com/CareySon/archive/2012/09/19/2693555.html 简介 死锁的本质是一种僵持状态,是多个主体对于资源 ...

  3. 1. 企业级调度器LVS初识、工作模式详解

    想学习更多相关知识请看博主的个人博客 1. LVS官网 LVS 时全球最流程的四层负载均衡开源软件. LVS 官网:http://www.linuxvirtualserver.org/ 2.Linux ...

  4. GitLab 常用命令

    1. 进入本地仓库访问位置之后执行命令 1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remot ...

  5. ctf之计算器

    题目信息如下: 打开环境,发现是一道简单的计算题 只能输入一位数字 F12查看源码发现作者将最大长度设置为1,我们将最大长度修改了即可 输入答案即可得到flag

  6. 12.16 JAVA swing

    ------------恢复内容开始------------ 12.16JAVA swing 1.框架 JFrame>JPanel>组件JButton JTestfilled JTable ...

  7. 深度学习训练过程中的学习率衰减策略及pytorch实现

    学习率是深度学习中的一个重要超参数,选择合适的学习率能够帮助模型更好地收敛. 本文主要介绍深度学习训练过程中的6种学习率衰减策略以及相应的Pytorch实现. 1. StepLR 按固定的训练epoc ...

  8. 如何快速开发基于Winform的应用系统

    在我们实际业务开发中,从头开发一个应用系统,不管是基于BS的前端项目,还是基于Winform的CS应用系统,都是由容易到复杂,逐步演化的一个开发过程,如果我们基于一定基础上,并配合一些配套的开发工具, ...

  9. Linux 下命令有哪几种可使用的通配符？分别代表什么含义?

    "?"可替代单个字符. "*"可替代任意多个字符. 方括号"[charset]"可替代 charset 集中的任何单个字符,如[a-z],[ ...

  10. select poll和epoll

    select poll epoll都是IO多路复用机制.这里的复用其实可以理解为复用的线程,即一个(或者较少的)线程完成多个IO的读写.这里总结下这三个函数的区别. 1 select 1.1 sele ...