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

時間 2019-12-10

標籤 css 邊框內凹圓角解決優惠券問題欄目 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>

最終應用在網站效果：html

參考：https://www.jianshu.com/p/631f156e8d11網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。