您的位置:首页> 前端教程> CSS3教程
文章导航

CSS border-radius 带边框

2019-11-20 16:25| 作者: admin| 查看: 1310| 评论: 0|来自: 蚂蚁部落

关于border-radius属性基本用法可以参阅CSS border-radius一章节。

矩形带边框与否对于圆角并没有实质影响,本文目的是强调一下注意点。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
   width:100px;
   height:100px;
   border: 30px solid green;
   border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/162636eoo789dr2rozuocz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下分析:

(1).边框的尺寸是30px,圆角半径的尺寸是20px。

(2).圆角所在圆的圆心并不在div的内容之内,而是位于边框之内。

(3).所以只有外部的圆角效果,内部没有圆角效果。

下面将圆角半径加大,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
   width:100px;
   height:100px;
   border: 30px solid green;
   border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/162710b1854335ov8osjkj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下分析:

(1).边框的尺寸是30px,圆角半径的尺寸是50px。

(2).圆角所在圆的圆心在div的内容之内。

(3).所以内外都有圆角效果。

内半径的尺寸等于外半径尺寸减去对应方位边框的尺寸。

比如,垂直内半径尺寸=垂直外半径尺寸-垂直方位边框尺寸,也就是50px-30px=20px。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部