DW中的CSS3圆角效果

最新推荐文章于 2023-07-05 10:11:36 发布

原创最新推荐文章于 2023-07-05 10:11:36 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

在Dreamweaver中创建圆角效果主要通过border-radius属性实现。文章通过实例展示了如何给元素添加该属性，以及如何设置不同角的弧度，包括缩写形式的使用，帮助读者理解CSS3圆角效果的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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;（缩写形式）如果记不住这些值代表的角，那么我们可以把从左到右的数值，只要记住左上角为起点，顺时针转一圈。就能记住了。