使用border-radius属性可以绘制各种各样的形状，border-radius使用比较复杂，可以设置8个值。
我们先说明一下它的语法：
- border-radius:第一组值(4个值)/第二组值(4个值);
以上语法中的两组值都可以写4个，顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
如果对一个正方形元素同时写两组值实现圆角，结果是椭圆，如果设置一组值结果是正圆，这个椭圆或正圆与边框的交集形成圆角效果。
好吧，不论如何描述，这个圆角边框都不好理解，不过不要紧，实际应用中几乎不会去绘制一些特别奇怪的形状。
下面看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框 border-radius 精讲 </title>
</head>
<style>
.box0{
display: inline-block;
width:300px;
height:200px;
background:seagreen;
margin-top:20px;
border-radius:50%;
}
button{
width:200px;
height:50px;
border-radius:10px;
}
.box{
display: inline-block;
width:200px;
height:200px;
border:10px solid #0C9;
background:#000;
/* 半圆 */
border-radius:50% 50% 0 0/100% 100% 0 0;
}
.box1{
display: inline-block;
width:0;
border:50px solid #fff;
border-top-color:#f00;
border-bottom-color:#0f0;
border-left-color:#00f;
border-right-color:#000;
border-radius:50%;
}
.box2{
display: inline-block;
width:200px;
height:200px;
border:10px solid #0C9;
background:#000;
/* 圆环 */
border-radius:50%;
}
.box3{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px 50px 30px 5px;
}
.box4{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px 50px 30px;
}
.box5{
display: inline-block;
width:200px;
height:200px;
background:#0C9;
border-radius: 15px;
}
</style>
<body>
<button>提交</button>
<div class="box0"></div><hr>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<hr>
</body>
</html>
显示结果如下：
大家可以把以上代码复制出来慢慢分析一下，主要掌握几个简单的椭圆和圆角设置方法即可。
|
窥视卡
雷达卡
发表于 2023-2-1 11:05:26
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 00:17:34
