Question

您好我想在css圆圈图像周围创建一个厚的半透明边框。

这是我的css代码：

.circle {
  display: block;
  width: 500px;
  height: 500px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: -99em;
  
  border-bottom: -5px solid rgba(214, 11, 82, 0.73);
  border-top: -5px solid rgba(214, 11, 82, 0.73);
  border-left:  -5px solid rgba(214, 11, 82, 0.73);
  border-right: -5px solid rgba(214, 11, 82, 0.73);    
}

 <div class="circle" style="background-image: 
       url('http://hk.helpstore.co.uk/images/intro.jpg')">
</div>

Answer 1

要创建您正在寻找的嵌入透明边框，您需要使用插入框阴影。

.circle {
  display: block;
  width: 500px;
  height: 500px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: -99em;
  box-shadow: inset 0 0 0 5px rgba(214, 11, 82, 0.73);
}

<div class="circle" style="background-image: 
       url('http://hk.helpstore.co.uk/images/intro.jpg')">
</div>

Answer 2

Border Css必须包括

Answer 3

好的，几个小时前就已经澄清了 因此，您可以使用inset和无法识别的box-shadow在圈子的内边缘绘制border之类的内容。

.circle {
  display: block;
  width: 500px;
  height: 500px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 99em;
  box-shadow:inset  0 0 0   25px rgba(214, 11, 82, 0.73);    /* size increase to 25 pxfor demo purpose */
}

<div class="circle" style="background-image: 
       url('http://hk.helpstore.co.uk/images/intro.jpg')">
</div>

我保留在澄清之前的先前的答案

不太确定这是否是你要找的：

伪元素和阴影悬停在上面，以隐藏和伪造边框

.circle {
  position: relative;
  overflow: hidden;
  border-radius: 3em;
  display: block;
  width: 500px;
  height: 500px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* border-bottom: 5px solid rgba(214, 11, 82, 0.73);
  border-top:5px solid rgba(214, 11, 82, 0.73);
  border-left:  5px solid rgba(214, 11, 82, 0.73);
  border-right: 5px solid rgba(214, 11, 82, 0.73);  */
}
.circle:before,
.circle:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 100%;
  left: 0;
  border-radius: 100%;
}
.circle:before {
  background: white;
  left: -80px;
  box-shadow: 5px 0 rgba(214, 11, 82, 0.73), 505px 0 white, 500px 0 rgba(214, 11, 82, 0.73);
  z-index: 1;
}
.circle:after {
  width: 100%;
  height: 150px;
  background: white;
  top: -100px;
  box-shadow: 0 5px rgba(214, 11, 82, 0.73), 0 550px white, 0 545px rgba(214, 11, 82, 0.73);
}

<div class="circle" style="background-image: 
       url('http://hk.helpstore.co.uk/images/intro.jpg')">
</div>

Answer 4

＆＃13;

.borderimg { 
    border: 10px solid transparent;
    padding: 15px;
background-color:pink;
  -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
}

＆＃13;

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">


<img src="http://i.imgur.com/lGq1IXo.png" class="w3-circle w3-border borderimg" alt="" style="width:50%">

</body>
</html>

＆＃13;

圈图像css带边框在圆圈图像

4 个答案: