DW中的CSS3圆角效果

在DW中，我们给元素制作圆角时，需要怎么样去制作呢？

在DW中，我们只要使用border-radius属这个属性，我们就可以给任何元素制作出圆角的效果来。

在用border-radius给元素制作圆角效果时，border-radius这个属性中一般会默认指定一个值,然后生成四个相同的圆角。下面我为大家来演示一下border-radius的作用。

假如我创建了两个盒子，一个是红色盒子，一个是蓝色盒子。我要给添加圆角效果的是蓝色盒子。那么我将给红色盒子输入如下代码：

.box{

width:

300px;

height:

300px;

background:

red;

text-align:

center;

line-height:

300px;

margin-left:

20%;

margin-top:

15%;

position:

absolute;

}

给蓝色盒子输入如下代码：

.box1 {

width:

300px;

height:

300px;

background:

blue;

text-align:

center;

line-height:

300px;

float:

right;

position:

relative;

left:

-400px;

top:

230px;

border-radius: 20px;

}

我只在蓝色盒子这里添加了border-radius的属性，而红色盒子并没有添加，那么我们来看一下有和没有的区别是怎么样的。

输入代码后我们就开始执行，执行结果看下图

由图我们可以发现，蓝色盒子的四个角已经变圆了。这就是我们的圆角效果。

当然，也有些人想让四个角的弧度都不一样，那么我们可以给这每个角指定一个值。

而我们想给每个角不同的值，那就得给每个角定义。

那么我来给红色盒子来添加border-radius这个属性，然后给红色盒子的每个角来添加不同得值。

我在之前的红色盒子代码里输入如下代码：

border-top-left-radius: 20px;（改变左上角的弧度）

border-top-right-radius:

50px;（改变右上角的弧度）

border-bottom-right-radius:

80px;（改变右下角的弧度）

border-bottom-left-radius:

110px;（改变左下角的弧度）

然后看一下红色盒子的变化（看下图）

哈哈，是不是觉得有点怪怪的。

其实对于上面四行代码，我们可以用一行代码就能完成：

Border-radius：20px 50px 80px 110px;（缩写形式）如果记不住这些值代表的角，那么我们可以把从左到右的数值，只要记住左上角为起点，顺时针转一圈。就能记住了。