border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。例如:
.semicircle {
     
      margin: 30px;
    }
    .top {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
    }
    .right {
      height: 100px;/*高度为宽度的2倍*/
      width: 50px;
      border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
    }
    .bottom {
      width: 100px;/*宽度为高度的2倍*/
      height: 50px;
      border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
    }
    .left {
      width: 50px;
      height: 100px;/*高度为宽度的2倍*/
      border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
    }

效果如图3-35所示。

border-radius制作半圆有两个小技巧:

制作上半圆或下半圆,元素的宽度值是高度值的2倍,而且圆角半径值为元素的高度值;

制作左半圆或右半圆,元素的高度值是宽度值的2倍,而且圆角半径值为元素的宽度值。

css3画半圆的更多相关文章

  1. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  2. css3画半圆 , 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  3. css3 画半圆和1/4圆

    半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...

  4. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  5. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  6. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  7. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  8. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  9. 如何用CSS3画出懂你的3D魔方?

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

随机推荐

  1. 基于SSH的网上购物商城系统-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 基于WEB的网上购物系统主要功能包括:前台用户登录退出.注册.在线购物.修改个人信息.后台商品管理等等.本系 ...

  2. 关于.net和java des加密

    在.net和java环境中对于des加密,有几点要协同的地方: 密钥和密钥向量Key IV 加密模式CipherMode 填充模式PaddingMode 密文编码方式 下面一段.net的des加密方式 ...

  3. c# Quartz.net的简单封装

    分享一个以前封装的Quartz.net类. 新建一个QuartzClass类库项目.nuget控制台输入 image.png 添加Quartz.net的引用. 我们新建一个JobBase.cs文件,里 ...

  4. javaScript prototype实例(正则) 自定义日期格式化方法

    一个JS自定义日期格式化方法,包括了不少知识点,以下方法来自jQuery DataTable中文的官方参考 //return (new Date(data)).Format("yyyy-MM ...

  5. Nginx自定义扩展模块

    1. 概述 参考 Nginx开发HTTP模块入门 2. 扩展模块(假设根目录名称为nginx) nginx/configure文件中可以修改配置文件路径(编译时使用): 例如像把配置文件从默认的ngi ...

  6. ocp题库更新,052最新考试题及答案整理-31

    31.Which two events always request the LGWR to write? A) when LGWR is notified by a server process t ...

  7. 读取xml文件内容到数据库

    前言 前言不搭后语·················· 内容 听某个大牛说他们的公司常常会涉及到从xml文件中读数据到写入到数据库,序列化的时候会遇到这这个问题,将要持久化的数据到xml文件存储起来, ...

  8. Servlet实现禁用cookie重写URL获取session

    前言 一个女人让他的程序员丈夫去商店买东西:你去附近的商店买些鸡蛋,如果有香蕉的话,买8个回来,这个丈夫买了8个鸡蛋回来,他的妻子大吃一惊:你为什么买了8个鸡蛋?! 程序员丈夫回答:因为他们有香蕉. ...

  9. 新建MAVEN项目--pom.xml报错

    使用集成了maven的Eclipse版本新建maven项目后,配置文件pom.xml会在project以及引用的xsd文件处出现错误(第一.二行报错) 其中一个报错例子: Multiple annot ...

  10. >>> 主页链接

    服 务 & SDK 网易云信|真正稳定的IM即时通讯云服务 微信小程序开发工具下载 百度LBS开放平台 ( 百度地图API示例) 微信JSSDK说明文档 (在线demo) 园 友 京东开涛 W ...