【杂谈】css怎样完成圆角边框和圆形结果？（图文+视频教程）
2019-11-18杂谈搜奇网52°c
A+ A-
css圆角边框的结果通常会用在前端网页设想中的导航栏或许提示框等部份。经由过程css设置圆角边框或许圆角图片的结果完成，能使团体网页页面显得越发雄厚。
本篇文章就给人人引见怎样运用css设置圆角边框的结果。下面我们经由过程细致的代码示例给人人举行相干学问详解。
css圆角边框代码示例以下：
示例1：css单边圆角边框结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css圆角边框代码示例</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #A6E22B;
margin: 20px auto;
/*完成单边圆角*/
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上述代码中，我们创建了一个边长为200的正方形。当我们只增加一个css款式border-top-left-radius为20px时，则会完成这个div左上圆角结果。以下图：
当我们再继承增加一个css款式border-top-right-radius为20px时，则会完成只给上面增加圆角的结果。以下图：
然后我们再继承增加两个css款式分别为border-bottom-left-radius和border-bottom-right-radius后，即上述代码在浏览器完成的终究结果就以下图：
那末经由过程上述一系列的形貌，人人是不是发现了关于css圆角边框主要的学问点？那就是border-radius 属性！这个属性是一个简写属性，它是用于设置四个 border-*-radius 属性。此属性就是为元素增加圆角边框的！
示例2：css圆形边框结果
/*同时完成四个边圆角*/ border-radius: 100px;
在示例1的html代码基础上，我们给边长200px的正方形div块只增加一个css border-radius款式属性，并设置值为100px即示意半径设为100px。则显现结果以下图所示：
本篇文章就是关于css设置圆角边框的细致引见，愿望对须要的朋侪有所协助！更多HTML/css学问，能够关注Ki4网 HTML视频教程和CSS视频教程
以上就是css怎样完成圆角边框和圆形结果？（图文+视频教程）的细致内容，更多请关注ki4网别的相干文章！
标签：css圆角边框