css3圆角和圆角边框使用方法总结

2020-11-27 来源：飒榕旅游知识分享网

在CSS3出现之前，想要实现圆角的效果可以通过图片或者用margin属性实现，传统的圆角生成方案，需要多张图片作为背景图案。CSS3出现以后，就不需要浪费时间去制作多张图片了，大大的减少了工作量，提高了网页的性能，提升页面加载速度，并且增加了视觉的可靠性。既然说了CSS3中的圆角有这么多的优势，那么我们就来总结下css3圆角和圆角边框使用方法。

可以先学习《快速玩转CSS3教程》中的 CSS3圆角介绍章节课程

快速玩转CSS3教程

CSS3圆角及圆角边框使用相关知识

1. css3圆角介绍与应用技巧

自适应椭圆与圆角构造，在css上构造圆形只需要将border-radius属性值设为边长的一半即可。这里我们全面介绍一下border-radius的属性，border-radius是一个简写属性，它的展开式是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。它还有一个鲜为人知的特性：border-radius可以单独指定水平和垂直半径，只要用一个斜杠（ / ）分隔这两个值即可（圆形圆角水平和垂直半径相等，可以合并）。结合这这些特性来看的话，border-radius:50%;的详细展开应该是border-radius:50% 50% 50% 50%/50% 50% 50% 50%。

2. CSS3圆角边框和边界图片效果实例分享

学习要点如下：圆角 border-radius；盒阴影 box-shadow；边界图片 border-image。border-radius 属性允许您为元素添加圆角边框！border-image 属性用于设置图片的边框。

3. 分享一篇CSS3圆角和渐变功能的实例代码

线性渐变：background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点中间颜色的位置,结束点颜色); Linear:渐变的类型（线性渐变）；渐变的形式：可选参数有两种方式-1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。

4. CSS3圆角边框的使用-遁地龙卷风

border-radius详解

border-radius:50px; 上右下左，水平和垂直距离都是50px

border-radius:50%; 这里的%号是已应用该css样式元素的长度和宽度为基数的

border-radius:50% 30% ; 上下，水平垂直是50% 左右，水平垂直是30%

border-radius:50% 30% 10%; 上,水平垂直是50%，左右，水平垂直是30%，下，水平垂直是10%

border-radius:10% 50% 30% 10%; 上，水平垂直都是10%。右，平垂直都是50%。下，水平垂直都是30%。左，水平垂直都是10% /前面是水平的,/后面是垂直的

border-radius:50% / 30% ; 上左下右,水平是50%，垂直是30%

border-radius:50% / 30% 10%; 上右下左，水平都是50%，上下垂直30%，左右垂直10%;

5. CSS3圆角,阴影,透明

CSS3实现圆角有两种方法.

第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了.

第二种方法就简洁了,直接用CSS实现,不需要用图片.

6. css3圆角边框制作方法

Firefox 和 Safari 使用私有属性实现圆角效果; 这个表示边框内的底部图片颜色; border: 1px solid #000;表示边框的宽度，实心的，颜色是黑色的； border-top-left-radius: 55px 25px;表示左上角的边框圆角效果，通过英文就可以识别:top,left，修饰圆角的长度通过控制像素值来实现，55px表示横向的长度，25px表示纵向的长度；同理，border-bottom-right-radius: 55px 25px;右下角的圆角效果只要修改top为bottom就可以了; 使用css3来实现边框圆角效果。

全部栏目

css3圆角和圆角边框使用方法总结