css邊框內凹圓角，解決優惠券的邊框問題

時間 2021-02-24

標籤 css html 網站 spa code htm blog class 欄目 CSS 简体版

原文原文鏈接

關於css邊框內凹圓角，找了很久才找到的css

<html
<head>
    <title>無標題頁</title>
    <style>
		body{
			background:#999
		}
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,#fff 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,#fff 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,#fff 50%);
}

.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,#fff 50%);
}
.ellipse {
   height: 100px;
   width: 100px;
   background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}    

</style>
</head>
<body>
  <div class='raidal4'></div>
<div class='raidal1'></div>
	<div class='raidal3'></div>
<div class='raidal2'></div>


</body>
</html>