div border-radius
可以画个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的更多相关文章
- 如何给div加一个边框border样式
如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...
- css 对div用hover设置border，出现抖动和div走位问题，解决方法
样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其 ...
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- CSS + radius 五环
使用CSS的外链方式,写了一个五环 CSS的布局 附加radius的使用 思路: 一个大盒子里放两个子盒子: 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环: 大盒子给相对定位,连个子盒子设为绝 ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- CSS魔法堂：重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- 向 div 元素添加圆角边框：
div { border:2px solid; border-radius:25px; }
- css给div添加0.5px的边框
具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- div加边框
一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...
- border opacity
div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-cl ...
随机推荐
- jquery阻止事件的两种实现方式
再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...
- php版网易视频云api
最近在做在线教育课程,使用网易云视频作为在线视频直播. 网易官方只有java示例,我们使用php,就自己写个api. 当然实现也是很简单的. 演示:http://www.deitui.com/inde ...
- #Leet Code# Evaluate Reverse Polish Notation
描述:计算逆波兰表达法的结果 Sample: [", "*"] -> ((2 + 1) * 3) -> 9 [", "/", & ...
- C#数据类型-string
string是各种编程语言中最基础的数据类型,长期以来受尽其它类的压迫,经常被肢解(Substring.Split).蹂躏(Join)... 而现在C#数据类型string要“翻身闹革命”了,它几乎无 ...
- EZ-USB FX2(68013)固件研究
原始资料来自网络 整理日: 2015年2月12日 1. Welcome 算是给所有正在学习USB,还徘徊着不得其门而入的朋友一个入门的契机吧,我也深知入门的痛苦,有些人入门就是抱着那什么USB协议,包 ...
- [LeetCode] Burst Balloons (Medium)
Burst Balloons (Medium) 这题没有做出来. 自己的思路停留在暴力的解法, 时间复杂度很高: 初始化maxCount = 0. 对于当前长度为k的数组nums, 从0到k - 1逐 ...
- PHP curl传输文件的版本兼容性
/** * 存储文件到远程服务器 * * @param string $filePath * 文件绝对路径 * @param string $fileSaveUrl * 存储的远程目标地址 * @pa ...
- Android读取url图片保存及文件读取
参考: 1.http://blog.csdn.net/ameyume/article/details/6528205 2.http://blog.sina.com.cn/s/blog_85b3a161 ...
- bzoj3875
悲伤地回忆,当初写了一个作死的算法爆零了为什么不好好写暴力呢……显然设w[i]表示彻底干掉这个怪物的代价注意发现这里的转移具有后效性,但是干掉每个怪物的最优值是一定的我们用spfa来转移,详见那篇sp ...
- efront二次开发记要
efront系统是一套开源的在线学习系统,是用PHP编写的,内含“考试”功能.该系统的开源的是社区版,虽然看上去功能强大,但使用起来却很不符合国情.为了让公司使用,先做了一次最简化的二次开发,由于是最 ...