Question

我搜索了很多，但我找不到任何解决方案。我想在底部有一个像下面的图像。 multiple border我怎么能在div上有这种类型的边框。我也希望像这样的circle image

有阴影圈的cricle图像

要在第一张图片的底部添加边框，我添加了以下代码：

.login-wrapper {
    background-color: #fff;
    padding: 20px 30px;
    margin: 0 auto;
    border-bottom: 1px solid #333333;
    box-shadow: 0 2px 0 0 #338833, 0 2px 0 0 #883333;
}

但是，它没有生成所需的输出。

获得第二张图像的欲望输出。我添加了以下代码。

对于圆形图像我添加了此代码：

<div class="login-wrapper" ng-controller="loginController">
    <div class="field-wrapper">
        <div class="login-img-wrapper">
            <img src="img/person.png" class="img-circle" />
            <div class="shadow"></div>
        </div>
    </div>
</div>

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 70px;
    width: 70px;
    border-radious: 50%;
}

.login-img-wrapper .shadow {
    background-image: linear-gradient(130deg, white 50%, transparent 40%);
    opacity: .7;
    z-index: 15;
    position: absolute;
    height: 60px;
    width: 60px;
    top: 0;
}

但这不会生成相同的图像。请有人帮助我。

在为第二张图片定义上面的css之后我得到了什么输出。

Answer 1

您可以尝试box-shadow：

.border-box {
	background:#ff0;
	display:inline-block;
	width:200px;
	height:20px;
	box-shadow:
		0 1px 0 #999,
		0 2px 0 #fff,
		0 3px 0 #999,
		0 4px 0 #fff,
		0 8px 0 #999;
}

<div class="border-box"></div>

第二张图片：

.circle-image {
	width:200px;
	height:200px;
	display:inline-block;
	background:#ccc;
	border-radius:50%;
	position:relative;
  text-align:center;
}
.circle-inner {
	width:200px;
	height:200px;
	display:inline-block;
	border-radius:50%;
	position:relative;
	transform:rotate(-45deg);
	position:absolute;
	top:0;
	left:0;
}
.circle-inner:after {
	content:"";
	width:200px;
	height:90px;
	display:inline-block;
	background:rgba(255,255,255,.3);
	border-radius:200px 200px 0 0;
	position:absolute;
	top:0;
	left:0;
}

<div class="circle-image">
  <div class="circle-inner"></div>
</div>

Answer 2

您键入radius拼写错误。

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 70px;
    width: 70px;
    border-radius: 50%;
}

Answer 3

以下是您可以尝试使用圆形，阴影和边框的开始。

Fiddle Demo 1
Fiddle Demo 2（更改了图片的边框/填充）

<div class="login-wrapper" ng-controller="loginController">
    <div class="field-wrapper">
        <div class="login-img-wrapper">
            <img src="http://lorempixel.com/output/people-q-c-100-100-9.jpg" />
            <div class="shadow"></div>
        </div>
    </div>
</div>


.login-img-wrapper {
    position: relative;
    height: 150px;
    width: 150px;
    background-color: #eee;
    margin: auto;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.login-img-wrapper:after,
.login-img-wrapper:before {
    z-index: -1;
    height: 4px;    
    bottom: -5px;
    left: 6px;
    right: 6px;
    background-color: #eee;
    border-bottom: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    content:" ";
    position: absolute;
}
.login-img-wrapper:after {
    bottom: -3px;
    left: 3px;
    right: 3px;
}
.login-img-wrapper:before {
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper img {
    border: 1px solid #f4f4f4;
    background-color: #f4f4f4;
    padding: 5px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    box-shadow: 0 0 10px gray;
}

.login-img-wrapper .shadow {
    background: linear-gradient(130deg, white 50%, transparent 40%);
    border-radius: 50%;
    opacity: .7;
    z-index: 15;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
}

<强>更新

使用新的CSS clip-path形状圆形，椭圆形和多边形，可以完成更高级的遮罩和形状，但它仍然有糟糕的浏览器支持。

在此处详细了解：https://css-tricks.com/clipping-masking-css/

对于更高级的剪辑/阴影（以及更好的浏览器支持），我建议开始将SVG与CSS结合使用。

首先，我们可以采取一些方法：Draw a crescent moon using SVG in HTML

如何使用css

3 个答案: