1.边框圆角属性border-radius使用

作用：设置边框的圆角。

属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

示例1：

示例2：

示例3：

当border-radius属性值为盒子的宽高度的一半，它就是一个圆形，只要值取值为50px及以上都是该效果，不会再进行更改。可以说是50px是最终结果了，再加像素也是按照50px进行加载。

注意：但是如上示例3不是最好的画圆形的方式，因为它如果存在其他属性，例如内边距，我们还需要给border-radius属性加上改内边距的像素值。

示例4：

当border-radius的属性值设置为50%时，也是可以同样实现圆形效果。

2.单一属性

border-top-left-radius: 半径;
border-top-right-radius: 半径;
border-bottom-right-radius: 半径;
border-bottom-left-radius: 半径;

3.简写方法

border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
border-radius: 左上角右上角右下角左下角;
border-radius: 左上角右上角和左下角右下角 ;
border-radius: 左上角和右下角右上角和左下角 ;
border-radius: 四个角相同;

3.1border-radius四值法

3.2border-radius三值法

3.3border-radius二值法

3.4border-radius单值法

4./ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

5.浏览器兼容

InternetExplorer8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

（22）css3新增边框圆角属性border-radius相关推荐

CSS3 图像边框 border-image属性
为了实现丰富多彩的边框效果,在CSS3中,新增了 border-image属性,这个新属性允许指定一幅图像作为元素的边框.该属性的优点是,可以根据一些简单的规则,把一幅图像划分为 9 个单独的部分,浏 ...
html 文字加边框阴影效果,CSS3之边框圆角、边框阴影和字体阴影
1.边框圆角在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦). 在htm ...
CSS3: border-radius边框圆角详解
border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...
CSS3新增的相关属性
文章目录前言 CSS3属性一,实现深色模式和浅色模式的切换 1.1,"checked"作用 1.2,语法 1.3,例二,盒子模型(背景) 2.1,释义 2.2 , " ...
css3 新增的文本属性
1.word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 2.word-break 规定非中日韩文本的换行规则 3.text-wrap 规定文本的换行规则 4.text-sha ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
css3新增属性有哪些？css3中常用的新增属性
** 一.css3新增边框属性 ** 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0 ...
不是css3新增的技术,css3新增属性有哪些？css3中常用的新增属性总结，分享
来提问这个问题的人都应该知道css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 % 这里说一下题外话,需要注意:"bor ...

（22）css3新增边框圆角属性border-radius