如何使用css在div上具有多个边框

Question

I have searched alot, but i did not find any solution. I want to have border at bottom something like below image. multiple border how can i have this type of border on div. I also want to have cricle image with shadow circle like this circle image

To add border at bottom in the first image i have added this code:

.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;
}

but, It is not generating the desired output.

To get the desire output for second image. I have added the below code.

for circle image i have added this code:

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

but this is not generating the same image. Please somebody help me.

What output i have got after aplying above defined css for second image .

Answer 1

You can try with 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> 

For your second image:

 .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

You typed the radius spelling wrong.

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

Answer 3

Here is a start from where you can experiment with circle, shadow and border.

Fiddle Demo 1
Fiddle Demo 2 (Changed border/padding for image)

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

Update

Using the new CSS clip-path shapes circles, ellipses, and polygons, more advanced masking and shapes can be done, though it still has bad browser support.

Read more about it here: https://css-tricks.com/clipping-masking-css/

For even more advanced clipping/shadowing (and better browser support) I recommend to start using SVG in combination with CSS.

As a start here is some ways to go: Draw a crescent moon using SVG in HTML