在css中怎样让边角具有弧度

发布网友发布时间：2022-04-27 04:20

我来回答

共5个回答

热心网友时间：2022-04-06 12:56

在css中，让边角具有弧度只需要用border-radius这个属性。

如图，这是一个测试页面，它们的边角分别为25PX和50PX半径的圆角。

写法像这样：
border-radius:25px;

测试代码如下

div{

width:200px;

height:130px;

background-color:wheat;

margin-bottom:10px;

}

拓展资料-css3简介

在CSS3推出前，圆角效果需要用图片实现，下面简要介绍CSS3。
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

热心网友时间：2022-04-06 14:14

　　对于border属性，css3提供了四个单独的属性，

　　* border-top-left-radius：

　　* border-top-right-radius
　　* border-bottom-right-radius
　　* border-bottom-left-radius

　　也就是这四个单独的属性，可以实现弧度的转换。

　　例：

　　radius可向 div 元素添加圆角边框。

　　border-radius 是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

　　1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

　　2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值

　　3、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

　　4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

热心网友时间：2022-04-06 15:49

css实现弧度边角转换的方法：

1、border-top-left-radiu 左上角

html：<div class="div1">左上角弧度</div>

css：.div1{border-top-left-radius: 30px;}

效果：

2、border-top-right-radius

html：<div class="div2">右上角弧度</div>

css： .div2{border-top-right-radius: 30px;}

效果：

3、border-bottom-right-radius 右下角弧度

html：<div class="div3">右下角弧度</div>

css：.div3{border-bottom-right-radius: 30px;}

效果：

4、border-bottom-left-radius 左下角弧度

html：<div class="div4">左下角弧度</div>

css： .div4{border-bottom-left-radius: 30px;}

效果：

5、border-radius 四个角弧度

html：<div class="div5">四个角弧度</div>

css： .div5{border-radius: 30px;}

效果：

源代码：

热心网友时间：2022-04-06 17:40

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;

以上是同时对四个边角设置半径为15px的弧度

同时也支持左上、右上、左下、右下

border-radius: 5px 15px 30px 60px;

热心网友时间：2022-04-06 19:48

添加圆角背景图。或是用9格表单做