CSS边框半径：20px

我想把边界半径设置成像那样的div，模糊div半径就是这样的。我怎样才能修好它？ 谢谢

<div class="content" style="background-image:url('img/2.jpg');"><br>
<div class="caption"><br>
<div class="blur">/div> <br>
<h1>Click/h1><br>
</div> <br>
</div><br>

/div>

单击/h1>

（编辑）

.content
{
-webkit边界半径：20px；
-moz边界半径：20px；
边界半径：20px；
边框：20px实心#25a9e6；
}
说明文字
{
光标：指针；
位置：绝对位置；
不透明度：0；

-webkit过渡：所有0.20易入易出；
-moz转换：所有0.20秒都易于输入输出；
-o型转换：所有0.20秒都容易输入输出；
-ms转换：所有0.20秒都易于输入输出；
过渡：所有0.20秒都易于输入输出；
身高：100%；
}
变得模糊不清
{
背景色：rgba（0,0,0,0.7）；
/*背景色：rgba（71942090.75）*/
宽度：210px；
高度：210px；
z指数：5；
位置：绝对位置；
-webkit边界半径：20px；
-moz边界半径：20px；
边界半径：20px；
}

您可以使用较少的标记，并向两个元素分配边界图形，以保持曲线，甚至绘制更多的细节。

点击

您可以添加。imageContent类：

border-radius: 50px;

---

但这也是临时解决方案…

请参阅以获取有关设置问题格式的帮助。图像和代码笔在某种程度上类似，您的问题是什么？我的模糊div半径出现。我编辑了图像预览链接

div:hover h1
{
  opacity: 1;
  background-color: rgba(0,0,0,0.7);
  color:white;
}

.imageContent, h1
{
  width: 210px;
  height: 210px;    
  border-radius: 20px;

}
.imageContent {
  overflow: hidden;
  border:10px solid #25A9E6;
  padding:10px;
  background:#25A9E6;
  box-shadow:0 0 0 1px gray,
    1px 1px 3px black,
    -1px -1px 3px gray;;
  box-sizing:border-box; 
  background-image:url('http://lorempixel.com/100/100/nature');
  background-size: cover;
  background-clip:padding-box;
}
h1 {
  height:100%;
  width:100%;
  margin:0;
  box-shadow:0 0 0 20px #25A9E6,
    inset 1px 1px 1px black,
    inset -1px -1px 1px white;
  text-align:center;
  line-height:160px;
  color:rgba(0,0,0,0);
}

<div class="imageContent" >
  <h1>Click</h1>
</div>

border-radius: 50px;