前端---HTML设置圆角边框

最新推荐文章于 2024-08-03 16:18:05 发布

lbxxzt

最新推荐文章于 2024-08-03 16:18:05 发布

阅读量1.4w

点赞数 3

分类专栏：前端文章标签： borde-radius 圆角边框边框形状

本文链接：https://blog.csdn.net/weixin_42504145/article/details/82833394

版权

前端专栏收录该内容

35 篇文章 2 订阅

订阅专栏

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.borderRadius="5px"

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

值	描述
border-width	规定边框的宽度。参阅：border-width 中可能的值。
border-style	规定边框的样式。参阅：border-style 中可能的值。
border-color	规定边框的颜色。参阅：border-color 中可能的值。
inherit	规定应该从父元素继承 border 属性的设置。

实现的代码及效果图如下:

<html>
<head>
<style type="text/css">
p
{ 
border: thin dotted #FF0000
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.border="thick solid #0000FF";
}
</script>
</head>
<body>

<input type="button" onclick="changeBorder()"
value="Change border" />

<p id="p1">This is a paragraph</p>

</body>
</html>