css3(border-radius)边框圆角详解
现在设置它的圆角半径为50px,即:
border-radius:50px;
border-radius可以同时设置1到4个值。(想想我们之前的margin与padding)如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
border-radius:50px 25px; //表示左上角和右下角使用第一个值,右上角和左下角使用第二个值
border-radius:25px 10px 50px; //左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值
border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(顺时针顺序)
border-radius:50px/25px;
border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;
border-top-left-radius: 50px;
border-top-left-radius: 50px 100px;//第一个值表示水平半径,第二个值表示垂直半径。
三、效果
实现代码:
width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:#fff;
实现代码
height:100px;
width:200px;
background: red;
border-radius:100px/50px;
css3(border-radius)边框圆角详解的更多相关文章
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- CSS3: border-radius边框圆角详解
border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...
- 转:CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
- CSS3教程:pointer-events属性值详解 阻止穿透点击
转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...
- css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- jface databinding:部分实现POJO对象的监测
在前一篇博文<jface databinding/PojoBindable实现对POJO对象的支持 >中,已经知道直接对POJO对象进行修改,是不能被绑定的UI组件知道的,在上一篇文章中 ...
- Oracle 取随机数
1.从表中随机取记录 select * from (select * from staff order by dbms_random.random) where rownum < 4 ...
- Leetcode Divide Two Integers
Divide two integers without using multiplication, division and mod operator. 不用乘.除.求余操作,返回两整数相除的结果,结 ...
- Android -- ImageView(控制图片的大小以及旋转的角度)
1.
- 团队作业week9 scenario testing
1.How do you expect different personas to use your software? What’s their need and their goals, how ...
- python学习 第一天
正式学习python第一天,网上找到了python教程,带练习题的,又装了ubuntu. 这是学习笔记: list[]: 可变,append/1,insert/2,pop/index? tuple() ...
- 关于type erasure
哇,好久没有写blog了,再不写的话,blog的秘密都要忘记了,嘿嘿. 最近在试着参与一个开源项目,名字叫avim(A Vibrate IM),别想多了哟.地址是:https://github.com ...
- Thinking in Java——笔记(11)
Holding Your Objects In general, your programs will always be creating new objects based on some cri ...
- Linux下解压命令大全 解压缩 tar bz2 zip tar.gz gz
.tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...
- [bzoj2463]谁能赢呢
我们通过观察可以发现,当n为偶数时,一定可以转化为一种先手必胜态,即棋盘可以被骨牌所覆盖, 如果n是奇数,那么去掉一格后一定能被1*2的骨牌覆盖,但是先手从左上角走,就进入了这个S态(必胜态),那么和 ...