<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现内凹圆角</title>
<style type="text/css">
body{background: #ccc;}
.tab{
width: 100px;
height: 50px;
margin: 10px auto;
background: #5b8bd0;
border-radius: 10px 10px 0 0;
}
/*线性渐变*/
.linear-gradient{
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 10px auto;
background-image: linear-gradient(to right,green,#fff);
}
/*如果两个色标的颜色一样,那么这两个色标之间的颜色是一种纯色*/
.change1{
background-image: linear-gradient(to right,green 0%,green 50%, #fff 100%);
}
/*渐变之发生在两个不同的色标之间*/
.change2{
background-image: linear-gradient(to right,green 0%,green 50%,#fff 75% ,#fff 100%);
}
/*当渐变的宽度逐渐趋向于0的时候并且重叠的时候,那么渐变的过程就会被压缩到0,就没有渐变了*/
.change3{
background-image: linear-gradient(to right,green 0%,green 50%,#fff 50.1% ,#fff 100%);
}
/*把白色变为透明色*/
.change4{
background-image: linear-gradient(to right,green 0%,green 50%,transparent 50.1% ,transparent 100%);
}
/*径向渐变,以元素的中心为圆点,中心到四个角的距离为渐变轴*/
.radial-gradient{
width: 100px;
height: 100px;
border:1px solid #000;
margin: 10px auto;
background-image: radial-gradient(green,#fff);
}
.c1{
background-image: radial-gradient(green 0px,green 50px,#fff 50.1px,#fff 100%);
}
.c2{
background-image: radial-gradient(green 0px,green 50px,#5b8bd0 50.1px,#5b8bd0 100%);
}
.c3{
background-image: radial-gradient(transparent 0px,transparent 50px,#5b8bd0 50.1px,#5b8bd0 100%);
}
.c4{
background-image: radial-gradient(transparent 0px,transparent 50px,#5b8bd0 50.1px,#5b8bd0 100%);
border:none;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div class="linear-gradient change1"></div>
<div class="linear-gradient change2"></div>
<div class="linear-gradient change3"></div>
<div class="linear-gradient change4"></div>
<div></div>
<div class="radial-gradient c1"></div>
<div class="radial-gradient c2"></div>
<div class="radial-gradient c3"></div>
<div class="radial-gradient c4"></div>
</body>
</html>请问我截取div的任意一个1/4角
yuyan
weibo_哆啦A梦有大口袋_0
相关分类