border-radius属性

在css3中可以使用border-radius进行圆角边框的绘制,在网页中呢,我们经常使用圆角边框来美化我们的页面,在css3出现之前呢!我们如果要在网页上展示一个圆角边框的一个效果,那么我们需要绘制图形,在css3出现之后呢我们就只需要一段简单的代码就可以实现圆角边框的效果。

使用方法

border-radius:半径

border-radius属性使用的时候,我们只需要定义好圆角的半径就可以绘制圆角边框了。

兼容性

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

来在项目中来测试一下,新建一个项目CSS3中边框相关的样式,新建一个网页文档index。

border-radius属性

border-radius属性

然后在下面定义一个div。

<div></div>

上面给div加上样式。写上宽度、高度、背景色、边框。



<style>

​        div{

​            width: 300px;

​            height: 150px;

​            background-color: #000;

​            border: solid 30px green;

​        }

</style>

预览一下。

这样一个效果,这是传统的边框设置,接下来就可以使用border-radius属性进行圆角边框效果的追加。


<style>
        div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: solid 30px green;
            border-radius: 30px;
        }
</style>

这个时候再来预览看一下。

这个圆角效果就出来了,我们还可以设置指定两个半径就是这样的格式“ border-radius:40px 20px;”在这里,我们在添加一些元素。


div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: solid 30px green;
            border-radius: 30px 90px;
        }

可以看到两边弧度大,两个弧度小。

不显示边框时

在CSS3中,如果使用了border-radius属性但是把边框设置为不显示时,浏览器会把背景的四个角绘制成圆角。来测试一下,在项目中把border隐藏掉。这里只设置了border-radius圆角。这个时候来看一下。

是这样的效果。它会把网页区域设置成圆角的效果,那么这是这个。

修改边框种类时

使用了border-radius属性后,不管边框是什么种类,都会将边框沿着圆角曲线进行绘制。来测试一下,现在的话是使用的实现的边框,我们把它设置成点画线的。

div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: dashed 30px green;
            border-radius: 30px 90px;
        }

就是这样的一个形状,绿色的点画线,但是呢它依然会围绕曲线来进行绘制。这个呢就是border-radius属性的一些设置。

绘制4个不同半径的圆角边框

border-top-left-radius:左上角半径

border-bottom-left-radius:左下角半径

border-top-right-radius:右上角半径

border-bottom-right-radius:右下角半径

来测试一下,注释掉border-radius。

div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: dashed 30px green;
            /*border-radius: 30px 90px;*/
            border-top-left-radius: 60px;
        }

这个时候来看一下。

就只有左上角有效果,我们要设置它的对角怎样设置。border-top-left是左上角。那右边的下边呢,可以这样。

div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: dashed 30px green;
            /*border-radius: 30px 90px;*/
            border-top-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }

就是这样的一个效果。

代码例

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>border-radius属性</title>
     <style>
        div{
            width: 300px;
            height: 150px;
            background-color: #000;
            border: dashed 30px green;
            /*border-radius: 30px 90px;*/
            border-top-left-radius: 60px;
            border-bottom-right-radius: 60px;
          }
      </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

CSS3新特性及属性

1、**在H5页面中定义一个宽600px,高300px的div盒子,使用CSS3定义其圆角边框,左上和右上的圆角半径为100px,左下和右下圆角半径为30px,效果如下图所示。**

2、**在H5页面中定义一个宽200px,高100px的div盒子,使用CSS3定义其边框阴影,水平和垂直阴影位置为20px,模糊距离为10px;效果如下图所示。**


一个好奇的人