<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .div1{

            width: 50px;

            height: 50px;

            background-color: #239285;

            margin: 30px;

        }

        .div2{

            width:100px;

            height: 50px;

            background-color: #239587;

            border-radius: 50px 50px 0 0;

        }

        .div3{

            width: 50px;

            height: 100px;

            background-color: #231587;

            border-radius: 0 50px 50px 0;

        }

        .div4{

            width: 100px;

            height: 50px;

            background-color: #219587;

            border-radius: 0 0 50px 50px;

        }

        .div5{

            width: 50px;

            height: 100px;

            background-color: #239597;

            border-radius: 50px 0 0 50px;

        }

    </style>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

<div class="div5"></div>

</body>

</html>

css 半圆效果的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  5. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  6. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  7. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

随机推荐

  1. asp.net core系列 49 Identity 授权(上)

    一.概述 授权是指用户能够访问资源的权限,如页面数据的查看.编辑.新增.删除.导出.下载等权限.ASP.NET Core 授权提供了多种且灵活的方式,包括:Razor pages授权约定.简单授权.R ...

  2. Python爬虫入门教程 53-100 Python3爬虫获取三亚天气做旅游参照

    爬取背景 这套课程虽然叫爬虫入门类课程,但是里面涉及到的点是非常多,十分检验你的基础掌握的牢固程度,代码中的很多地方都是可以细细品味的. 为什么要写这么一个小东东呢,因为我生活在大河北,那雾霾醇厚的很 ...

  3. handler原理

    一.消息机制概述 1.消息机制的简介 (1)Handler是什么 handler使Android给我们提供的用来更新UI的一套机制,也是一套消息处理机制:我们可以用它发送处理消息. (2)Androi ...

  4. JavaScript实现登录窗口的拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  6. Web学习的第四天

    今天通过前面的学习,自己写了段代码. 今天还学习了列表,列表的分类有:无序列表.菜单列表.目录列表.有序列表.定义列表. 列表类型                     标记符号          ...

  7. 关于css兼容性问题及一些常见问题汇总

    目前主流浏览器的兼容性做的都比较好了,本文主要针对IE6,7的不兼容问题进行解决. 1.圆盘时钟有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度. ...

  8. GIS之家资源

    分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...

  9. 必看！如何让你的LBS服务性能提升十倍！

    本文由云+社区发表 作者:腾讯云数据库团队 随着国内服务共享化的热潮普及,共享单车,共享雨伞,共享充电宝等各种服务如雨后春笋,随之而来的LBS服务定位问题成为了后端服务的一个挑战.MongoDB对LB ...

  10. Java核心技术第五章——2.Object类

    Object类:所有类的超类 Object类是Java中所有类的始祖,在Java中每个类都是由它扩展而来的.但是并不需要这样写: public class Emloyee extends Object ...