<!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角
2 回答
已采纳
yuyan
TA贡献3条经验 获得超4个赞
background-image: radial-gradient(200px at 100px 0px, transparent 100px, #5b8bd0 100px);
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
.box {
width: 500px;
height: 500px;
margin: 50px auto;
/*经过测试 这行代码200px at 100px 100px的意思是 */
/*生成一个为200px直径的圆*/
/*第一个100px为圆心X轴到原点X轴的距离 */
/*第二个100px为圆心Y轴到原点Y轴的距离*/
/*#fff 100px为园内的背景颜色*/
/*#000 100px为圆外的背景颜色*/
background-image: radial-gradient(200px at 100px 100px, #fff 100px, #000 100px);
}- 2 回答
- 0 关注
- 2221 浏览
添加回答
举报
0/150
提交
取消