欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css边框内凹圆角,解决优惠券的边框问题

程序员文章站 2024-03-22 23:39:52
...

关于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>

  css边框内凹圆角,解决优惠券的边框问题

 最终应用在网站效果:css边框内凹圆角,解决优惠券的边框问题

 参考:https://www.jianshu.com/p/631f156e8d11