凹圆角css样式

最新推荐文章于 2024-05-23 00:00:00 发布

yangsen0927

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量309

点赞数

分类专栏：工作日记

工作日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述
代码如下

<html>

<head>

<meta charset="utf-8"/>

<title></title>

<style type="text/css">

.cro{

width: 100px;

height: 100px;

border: 1px solid #58C4E6;

position: relative;

}

.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{

position: absolute;

width: 20px;

height: 20px;

border: 1px solid #fff;

z-index: 1;

background: #fff;

}

.cro_left_top{

top: -1px;

left: -1px;

border-radius:0px 0px 20px 0px;

border-bottom: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_top{

top: -1px;

right: -1px;

border-radius:0px 0px 0px 20px;

border-bottom: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

.cro_left_bottom{

left: -1px;

bottom: -1px;

border-radius:0px 20px 0px 0px;

border-top: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_bottom{

right: -1px;

bottom: -1px;

border-radius:20px 0px 0px 0px;

border-top: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

</style>

</head>

<body>

<div class="cro">

<div class="cro_left_top"></div>

<div class="cro_right_top"></div>

<div class="cro_left_bottom"></div>

<div class="cro_right_bottom"></div>

</div>
</body>

</html>