html - 请教，下图登录页如何用css实现？半透明的边框怎么做？

Question

Answer 1

試了一把

demo

Answer 2

謝謝各位答主的答案，參考了下，然後去學習了下css3屬性box-shadow和border-image，自己寫的一個demo
登入頁demo

1. 背景

p鋪滿整個螢幕，然後在p上加入背景圖片以達到效果

.bg-p{
    background: url('/img/bg2.jpg') center;
} 

2. 頭像

<img class="user-avater" src="/img/user-4.png"/>

新增css樣式，border-radius: 50%;

3. 邊框

3.1 半三角：偽元素::after

一個p，順時針旋轉45度，三角的兩邊是p的上、左邊框，after偽元素特性置於p的下方，不會遮擋住主體的p

.box::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -21px;
    border-top-left-radius: 4px;
    border-left: 2px solid rgba(255,255,255, 0.3);
    border-top: 2px solid rgba(255,255,255, 0.3);
    transform: rotate(45deg); /*旋转45度*/*
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

3.2 上方邊框：偽元素::before

偽元素before是一個400px*2px容器，分開的兩邊邊框通過設置容器的box-shadow，左右內陰影

.box::before {
    content: '';
    display: block;
    width: 400px;
    height: 2px;
    position: absolute;
    border-top-left-radius: 4px;
    box-shadow: inset 171px 0 0 0 rgba(255,255,255, 0.2), inset -171px 0 0 0 rgba(255,255,255, 0.2); /*通过内阴影实现边框效果*/
}

3.3 其餘邊框：border

.box{
    border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
    border-top: 0; /*去掉上边框*/
}

4. 透明輸入框

背景透明，邊框半透明，加入內外漸層陰影

.form-input{  
    background: transparent; /*背景透明*/
    border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
    box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2);  /*内外渐变阴影*/
}

Answer 3

這個如果只相容現代瀏覽器用css3中border-image或是漸變差不多可以做出來的，如果相容ie8直接切圖就好

Answer 4

ie8以下建議用背景圖片，9以上box-shadow用rgba設定邊框顏色及透明度input框背景rgba設定背景顏色及透明度ie-css3.htc 也可以讓ie低版本支援box-shadow、radius等屬性ps 整個登入框其實都有背景色的只是很淺但有