还是border-radius属性,将div边框(border)的四个直角变成圆角

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了还是border-radius属性,将div边框(border)的四个直角变成圆角相关的知识,希望对你有一定的参考价值。

参考技术A 下面给出class,你可以写在css文件里面,然后把要改的div  class属性引入radius这个就行了。

/*将div的border变成圆角*/

.radius

border-radius: 8px 8px 8px 8px;   /*这四个值的大小代表角的大小,顺序上右下左*/

html边框圆角化代码

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档,在body标签中添加一个div标签,然后为这个div标签设置边框,这时默认情况下边框是直角:

2、为div标签设置“border-radius”属性,属性值为圆角半径大小,这时边框的四个顶角都会变成圆角:

3、为div标签设置“border-radius”属性,属性值分别对应边框的左上角、右上角、右下角和左下角,这时可以对每个顶角自定义设置圆角半径:

参考技术A

html文本框圆角边框css样式可以通过改变border-radius属性的值进行添加。border-radius值的单位可以使用“px”,也可以使用“%”,单位不同效果也不同。具体代码如下:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

创建圆角的方法

CSS3随着HTML5/CSS3的到来,CSS3样式的圆角必将成为构建未来网站的趋势。CSS3相对于其它方式,更加容易应用,不需要额外的HTML标记和图片。支持CSS3圆角的浏览器包括FireFox,Chrome,Opera,IE9等;由于中文用户多使用IE,并且多为IE6-IE8,因此,CSS3的普及尚需时日。

以上内容参考:百度百科-圆角

参考技术B

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档,在body标签中添加一个div标签,然后为这个div标签设置边框,这时默认情况下边框是直角:

2、为div标签设置“border-radius”属性,属性值为圆角半径大小,这时边框的四个顶角都会变成圆角:

3、为div标签设置“border-radius”属性,属性值分别对应边框的左上角、右上角、右下角和左下角,这时可以对每个顶角自定义设置圆角半径:

参考技术C CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以本回答被提问者采纳 参考技术D style="border-radius: 5px" px设置的是圆角的弧度大小。

具体参考:http://www.w3school.com.cn/cssref/pr_border-radius.asp

以上是关于还是border-radius属性,将div边框(border)的四个直角变成圆角的主要内容,如果未能解决你的问题,请参考以下文章

Border-radius属性--设置圆角边框

边框半径 + 背景颜色 == 裁剪边框

div+css 边框渐变色怎么做啊?

CSS3就是这么神奇,先从border-radius开始

哪个边框半径属性将在 IE9 中起作用?

万字长文:CSS盒子模型