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属性,支持浏览器IE 9.Opera 10.5.Safari ...
- 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 ...
随机推荐
- pandas 中文快速查询手册
本文翻译自文章: Pandas Cheat Sheet - Python for Data Science ,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非 ...
- hdu4121 poj4001 Xiangqi(模拟)
模拟题考验coding能力,一定要思路清晰,按照模块化思想,有哪些情况,需要哪些功能都要事先分析好了.高手的模拟题代码往往结构很清晰,功能模块写成函数,没有过多重复代码,让人一看便明. 方法选择的好坏 ...
- bzoj 3681 Arietta
一棵有根树,每个点有一个音高,有 $m$ 中弹奏方法,每种方法可以弹奏 $d$ 子树中音高在 $[l,r]$ 间的音符,每种方法最多弹 $t$ 次 求最多能弹出多少个音符 $n \leq 10000$ ...
- 242. Valid Anagram Add to List
Given two strings s and t, write a function to determine if t is an anagram of s. For example,s = &q ...
- Redis底层探秘(四):整数集合及压缩列表
整数集合 整数集合(intset)是集合键的底层实现之一,当一个集合只包含 整数值元素,并且这个集合的元素数量不多时,Redis就会使用郑书记和作为集合键的底层实现. 整数集合的实现 整数集合是red ...
- LeetCode Shopping Offers
原题链接在这里:https://leetcode.com/problems/shopping-offers/description/ 题目: In LeetCode Store, there are ...
- 【LeetCode】003. Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...
- VS2005环境下的DLL应用
VS2005环境下的DLL应用 作者:一点一滴的Beer http://beer.cnblogs.com/ 以前写过一篇题为<VC++的DLL应用(含Demo演示)>的文章,当时是刚开始接 ...
- mysql之 共享表空间与独立表空间、frm,MYD,MYI.idb,par文件说明
一.共享表空间与独立表空间MySQL5.5默认是共享表空间 ,5.6中,默认是独立表空间. 共享表空间:ibdata1是InnoDB的共享表空间,默认配置是把全部表空间存放到ibdata1中,因此而造 ...
- git之切换分支出现的问题
当在其他分支,如test分支开发的时候,新增了文件夹等目录结构.开发完成后,切换会master分支. 如果出现“Deletion of directory '***' failed. Should I ...