可以画个1/4之一的圆也可以画整个圆

<html>

<style type="text/css">

div{

    background-color: #000;

    width: 100px;

    height: 100px;

    border-radius: 50px;

    position: absolute;

}

#half{

    background-color: #fff;

    width: 50px;

    height: 50px;

    top: 1px;

    left: 1px;

    position: absolute;

    border-radius: 50px 0 0 0 ;

}

</style>

<body>

    <div>

        <div id="half"></div>

    </div>

</body>

</html>

效果：

也可以画个半圆

<html>

<style type="text/css">

body{

    background-color: #f00;

}

div{

    content: "";

    position: relative;

    left: 200px;

    width: 200px;

    height: 400px;

    border-radius: 0px 200px 200px 0px;

    background-color: #fff;

    display: block;

}

</style>

<body>

    <div></div>

</body>

</html>

div border-radius的更多相关文章

  1. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  2. css 对div用hover设置border，出现抖动和div走位问题，解决方法

    样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其 ...

  3. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  4. CSS + radius 五环

    使用CSS的外链方式,写了一个五环 CSS的布局 附加radius的使用 思路: 一个大盒子里放两个子盒子: 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环: 大盒子给相对定位,连个子盒子设为绝 ...

  5. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  6. CSS魔法堂：重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  7. 向 div 元素添加圆角边框：

    div { border:2px solid; border-radius:25px; }

  8. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  10. border opacity

    div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-cl ...

随机推荐

  1. 基于jQuery的图片左右轮播，基本原理通用

    毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...

  2. C#XML创建与节点对象引用

    我们在创建xml过程中会遇到不同的级别有相同节点的情况.如下面的xml: <?xml version="1.0" encoding="GBK"> & ...

  3. 3D 服务器端以向量计算为主的角色位置的算法

    把我以前学习过的一个东西拿出来分享下~ 3D服务器端玩家行走处理是服务器端根据客户端行走路径.玩家行走时间以及速度(包括变化速度)计算得出玩家的当前位置. 由于客户端行走是一条路径,不使用2D中的格子 ...

  4. linq any()方法实现sql in()方法的效果

    public IQueryable<Vsec009ComSecComp> QueryList(Sec009ComSecCompQueryCondition condition) { var ...

  5. STM32之SD卡

    目录 一.SD卡概述 1.定义 2.容量等级 3.SD卡框图 4.SD卡与TF卡的区别 二. SD卡内部结构 1. SD卡内部结构简图 2. 存储阵列结构图 3.Buffer 4.“存储阵列Block ...

  6. Mvc基础(1)

  7. GRUB引导——menu.lst的写法

    转自menu.lst的写法.menu.lst的写法 1.menu.lst的写法之一 首先我们看一下我的Fedora 4.0 中的/boot/grub/menu.lst 的内容: default=0  ...

  8. Maven安装与更新

    Maven是Apache组织中的一个颇为成功的开源项目,主要服务于基于Java平 台的项目构建.依赖管理和项目信息管理: 1) Maven是跨平台的,在Windows.Linux和Mac上都可以使用: ...

  9. WINDOWS WMI--这是一个神奇的应用

    运行:wbemtest.exe

  10. [wikioi]多源最短路

    http://wikioi.com/problem/1077/ Floyd算法.精华是三层循环,if (dist(i,k) + dist(k,j) < dist(i,j)) then dist( ...