- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS的border-radius属性能做什么，有哪些值
CSS的border-radius属性能做什么，有哪些值
Admin 2022-11-12 群英技术资讯 1470 次浏览
关于“CSS的border-radius属性能做什么，有哪些值”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。给元素设置圆角半径的CSS属性是border-radius。
border-radius属性可以设置元素的外边框圆角；使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
语法：
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
border-radius属性值的指定规则：
-
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
-
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
-
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值： 四个圆角值相同
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners1 {
border-radius: 25px;
background: #8AC007;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
}
#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: repeat;
}
</style>
</head>
<body>
<p>指定背景颜色元素的圆角:</p>
<div id="rcorners1">圆角</div>
<p>指定边框元素的圆角:</p>
<div id="rcorners2">圆角</div>
<p>指定背景图片元素的圆角:</p>
<div id="rcorners3">圆角</div>
</body>
</html>
效果图：
感谢各位的阅读，以上就是“CSS的border-radius属性能做什么，有哪些值”的内容了，经过本文的学习后，相信大家对CSS的border-radius属性能做什么，有哪些值都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS中常见的清除浮动方法和优缺点分别是什么
1、采用伪类:after进行后续空制的高度位零的伪类层清除2、采用cssoverflow:auto的方式撑高3、采用cssoverflow:hidden的方式产生怪异适应4、采用display:table将对象变成table形式5、采用div标签，以及css的clear属性6、采用br标签，以及css的clear属性7、采用br标签，以及其自身html的clear属性粗略的看，他们都能将问题解 ...
-
用CSS怎样实现一个简单的加载等待提示框
最近做项目遇到这样的需求，页面加载数据比较慢，一直没有反应，下面小编给大家带来了基于CSS制作提示框 ‘正在加载请。。。。。’功能，需要的朋友参考下吧
-
如何用CSS和JS做流星雨效果，过程是什么
这篇文章主要介绍了CSS 、JS实现浪漫流星雨动画的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
-
CSS样式冲突怎么办？有什么解决方法？
这篇文章主要给大家分享CSS样式冲突的解决方法的内容，本文给大家介绍了几种技巧，还有示例供大家参考，感兴趣的朋友可以参考看看，接下来就跟随小编来学习吧。
-
CSS中margin外边距如何设置，要点有哪些
css外边距margin的介绍：1、用来增加元素间距的，外边距跟边框一样，分为上、右、下、左4个方向的边距。2、margin可以沿着四个不同的方向(top,right,bottom,left)添加。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
