织梦模板代理加盟 2020全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 麦站网 > 站长学院 > 建站教程 >

CSS3 圆角 border-radius

来源:本站原创 发布时间:2019-12-25 22:04:40热度:我要评论(0

免费下载,无需注册无需充值

CSS3的升级,支持边框圆角,使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

实例代码一:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
<style> 
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
</head>
<body>
<p id="rcorners1">圆角</p>
</body>
</html>

实例一运行效果:

CSS3 圆角 border-radius

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

CSS3 圆角 border-radius

3. 两个值 - border-radius: 15px 50px:

CSS3 圆角 border-radius

转载请注明来源网址:https://www.xiuzhanwang.com/news/2038.html

    发表评论

    评论列表(条)