效果图:

<!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. Kibana-CentOS7单机安装测试

    一.是什么 Kibana 是为 Elasticsearch设计的开源分析和可视化平台.你可以使用 Kibana 来搜索,查看存储在 Elasticsearch 索引中的数据并与之交互.你可以很容易实现 ...

  2. laravel 框架登录 实际操作

    //登录中间件 Route::group(['middleware'=>'checkage'],function (){ Route::get('/mou/list','MouControlle ...

  3. Linux下面怎么安装PHP扩展?

    一般开发环境都是在windows上, 安装扩展也很容易, 直接把下载的.dll文件扔到ext下面, 改一下php.ini文件. 完事了. linux上有两种安装方法 1.编译安装 //下载文件 #wg ...

  4. jQuery-ajax-天气接口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Casbin入选2022 Google编程之夏

    Casbin入选2022 Google编程之夏! Google编程之夏(Google Summer of Code,GSoC),是由Google公司所主办的年度开源程序设计项目,第一届从2005年开始 ...

  6. .htaccess文件构成的PHP后门

    1..htaccess文件 2.文件上传绕过 一般.htaccess可以用来留后门和针对黑名单绕过 创建一个txt写入(png解析为php) AddType application/x-httpd-p ...

  7. matplotlib字体

    matplotlib官方文档 https://matplotlib.org/stable/gallery/index.html 使用以下代码查看 import matplotlib.pyplot as ...

  8. java面向对象思想之封装

    一.什么是封装 菜鸟教程对封装的解释是"在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部分包装.隐藏起来的方法.".简单来说就 ...

  9. dfs:10元素取5个元素的组合数

    #include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...

  10. 华为云图引擎服务 GES 实战——创图

    本实验主要是熟悉 GES 的创图操作,GES 创图的大致流程如下所示. 环境准备 上传数据 导入元数据 创建图 环境准备 由于 GES 的原始数据是存在 OBS 上的,如果 OBS 上没有桶,需要按照 ...