css3 border-radius圆角边框属性笔记

原创 PHP笔记  2017-12-01 16:39  阅读 1,978 views 次

定义及用法

1、在php中,border-radius属性是用来为元素设置圆角边框;可以同时设置元素的四个角(border-top-left-radius:左上角、border-top-right-radius:右上角、border-bottom-left-radius:左下角、border-bottom-right-radius:右下角)的复合属性。

2、border-radius属性有四个属性值,分别代表:左上角,右上角,右下角,左下角的形状。如果只有三个属性值,第四个属性的值默认和第二个相同;如果只有两个属性值,第三四个属性值默认分别和第一二个相同;如果只有一个属性值,其余的三个默认都和第一个相同。

border-radius属性属性值

  • length:数值来定义。
  • %:百分比来定义。

语法格式:

border-radius: length / % [1-4]; //可以有1-4个属性值

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-radius圆角边框属性笔记</title>
<style>
p{border-style:solid;width:300px;height:40px;}
#br1 {border-radius:20px;}
#br2 {border-radius:5px 10px}
#br3 {border-radius:5px 10px 20px;}
#br4 {border-radius:5px 10px 20px 25px;}
</style>
<head/>
<body>
<p id="br1">四个角一样20px</p>
<p id="br2">左上角和右下角5px,右上角和左下角10px</p>
<p id="br3">左上角5px,右下角20px;右上角和左下角10px</p>
<p id="br4">四个角分别为5px、10px、20px、25px</p>
</body>
</html>

运行结果:

css3 border-radius圆角边框属性笔记

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-radius.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情