在css2中，如果需要失效一些圆角或者半圆等等效果，一般是要通过ps等软件来处理的，在CSS3中，则不需要了，只需要通过border-radius就可以实现，大大方便了开发的效率。

　　无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius 不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <title>CSS3</title>
  7.      <style>
  8.          *{margin:;padding:;}
  9.          ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
  10.          li{background:red;}
  11.           .circle1{width:100px;height:50px;border-radius:50px 50px  ;line-height:50px;}
  12.           .circle3{width:100px;height:50px;border-radius:  50px 50px;line-height:50px;}
  13.           .circle2{width:50px;height:100px;border-radius: 50px 50px ;line-height:100px;}
  14.           .circle4{width:50px;height:100px;border-radius: 50px   50px;line-height:100px;}
  15.           .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;}
  16.      </style>
  17.  </head>
  18.  <body>
  19.      <ul>
  20.          <li class="circle1">上边圆</li>
  21.          <li class="circle2">左边圆</li>
  22.          <li class="circle3">下边圆</li>
  23.          <li class="circle4">左边圆</li>
  24.          <li class="circle5">全圆</li>
  25.      </ul>
  26.  </body>
  27.  </html>

　　效果如下：

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

  1. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  2. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  5. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  6. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  7. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  8. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  9. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

随机推荐

  1. zookeeper acl认证机制及dubbo、kafka集成、zooviewer/idea zk插件配置

    ZooKeeper的ACL机制 zookeeper通过ACL机制控制znode节点的访问权限. 首先介绍下znode的5种操作权限:CREATE.READ.WRITE.DELETE.ADMIN 也就是 ...

  2. hangfire 实现已完成的job设置过期，防止数据无限增长

    1.添加SucceededStateExpireHandler 继承接口 IStateHandler public class SucceededStateExpireHandler : IState ...

  3. SQLServer查看及设置最大连接数（转）

    转自:https://blog.csdn.net/duanbeibei/article/details/86573840 很多时候自己本地开发会遇到 ,打开几个连接正常访问 之后就报错误,这时候需要调 ...

  4. 如何在nginx下实现访问web网站密码认证保护的功能

    在某些特定的环境下,我们希望nginx下的web站点在访问时需要用户输入账户密码才能访问.以便拒绝那些不速之客. 其实,配置起来也很简单,按照下面的步骤即可实现. 一.编辑虚拟主机配置文件. serv ...

  5. windows cmd ftp 自动下载

    1.编写ftp的bat脚本: set year=%,% set day=%,%%,%%,% mkdir d:\ftp\%,% mkdir d:\ftp\%,%\%,%%,%%,% del d:\ftp ...

  6. [转]TrueType（TTF）字体文件裁剪（支持简体中文，繁体中文TTF字体裁剪）

    原文入口: TTF字体文件裁剪(支持简体中文,繁体中文TTF字体裁剪) 对于TrueType(TTF)字体格式的介绍可以看: https://www.cnblogs.com/slysky/p/1131 ...

  7. java多线程（六）线程控制类

    1.   多线程控制类 为了保证多线程的三个特性,Java引入了很多线程控制机制,下面介绍其中常用的几种: l  ThreadLocal l  原子类 l  Lock类 l  Volatile关键字 ...

  8. JavaScript 图片与Base64数据互相转换脚本

    JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...

  9. vue-cli3项目关闭烦人的代码检测

    参考博客:https://blog.csdn.net/e1172090224/article/details/99636767 vue.config.js module.exports = { lin ...

  10. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器与EasyDSS流媒体解决方案的不同

    背景分析 众所周知,立足于视频软件的开发,我们的产品很多.经常有客户问到我们产品的差别以及某个产品在某个系统架构中的具体定位,因此我想通过一系列的博客说明一下,不同产品之间的区别,以及在具体架构中自身 ...