Question

我想将border-radius设置为div，就像那样.Blur div radius就是这样。我该如何解决？谢谢。

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

image-preview here （编辑）的

CodePen Example here

.content
{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 20px solid #25a9e6;
}
.caption
{
    cursor: pointer;
    position: absolute;
    opacity: 0;<br>
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    transition: all 0.20s ease-in-out;
    height:100%;
}
.blur
{
    background-color: rgba(0,0,0,0.7);
    /*background-color: rgba(7, 194, 209, 0.75);*/
    width: 210px;
    height: 210px;
    z-index: 5;
    position: absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Answer 1

您可以使用较少的标记并将边框绘制分配到两个元素以保持曲线，甚至可以绘制更多细节。 http://codepen.io/anon/pen/ksuzK

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>

Answer 2

您可以添加 .imageContent 类：

border-radius: 50px;

但它也是临时解决方案......

CSS border-radius：20px

2 个答案: