<!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角
如何截取div的1/4
weibo_哆啦A夢有大口袋_0
2016-07-15 11:41:39
