表單美化
如果
body不能直接撐起高，給html標簽添加height:100%filter是濾鏡，針對的元素里面的所有內容若锁，默認是0px-
效果使用
background-clip: content-box;，同時設置padding值.clip:裁切
效果 使用定位劇中的方法：
left與margin配合使用。background: linear-gradient(red 10%,red 20%,green 20%,green 40%,blue 40%);
background: linear-gradient(transparent 0%,transparent 10%, black 10%,black 11%,transparent 11%);
.father{
display:flex;
}
.son{
flex:1;
}
flex: 1;
/*
flex決定了寬度
根據(jù)當前富裕寬度[剩余可利用空間]/當前 fiex總和邓萨。
*/
outline是輪廓。像input標簽的點擊淺藍色就可以通過設置outline清除掉
//獲得焦點之后菊卷，執(zhí)行CSS
<style>
.input1{
outline: none;
border: none;
height: 50px;
border-bottom: 1px solid black;
}
.input1:focus{
border-bottom-color: red;
}
.input1::-webkit-input-placeholder{
transition: .5s;
}
.input1:focus::-webkit-input-placeholder{
transform: scale(0.7) translateY(-10px);
transform-origin: left top;
}
</style>
</head>
<body>
<input type="text" class="input1" placeholder="請輸入賬號" >
</body>
詳盡代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單美化2</title>
<style>
*{
margin: 0px;
top: 0px;
}
html{
height: 100%;
}
body{
height: 100%;
}
.mask{
width: 100%;
height: 100%;
background-image: url("img/bg.jpg");
background-size: cover;
filter: blur(5px);/*這個是添加的濾鏡*/
}
.drog{
position: absolute;
left: 0px;
top: 0px;
width: 640px;
height: 620px;
border: 1px solid white;
background-color: rgba(255,255,255,0.8);
background-clip: content-box;/*規(guī)定背景圖的繪制區(qū)域*/
padding: 10px;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -310px;
border-radius: 10px;
}
.title{
text-align: center;
font-size: 28px;
margin: 24px 0px;
display: flex;
}
.title .title_name{
padding: 0px 10px;
}
.title .line{
background: linear-gradient(transparent 49%,black 49%,black 50%,transparent 50%);
flex:1;
}
table{
width: 100%;
}
.td_left{
text-align: right;
width: 150px;
}
.userInput{
outline: none;
height: 40px;
border:none;
border-bottom: 1px solid black;
background-color: rgba(255,255,255,0);
}
.userInput:focus{
border-bottom-color: red;
}
.userInput::-webkit-input-placeholder{
transition: .5s;
}
.userInput:focus::-webkit-input-placeholder{
transform: scale(0.7) translateY(-10px);
transform-origin: left top;
}
/*單選框修改*/
.chooseGender input{
display: none;
}
.chooseGender label{
width: 8px;
height: 8px;
margin: 1px;
border: 1px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
}
.chooseGender input:checked +label{
border-color: #888;
}
.chooseGender input:checked+label:before{
content: '';
width: 4px;
height: 4px;
background-color: red;
display: inline-block;
position: absolute;
border-radius: 50%;
left: 2px;
top: 2px;
}
/*單選框修改結束*/
/*多選框修改*/
.chooseGreens input{
display: none;
}
.chooseGreens label{
width: 9px;
height: 9px;
margin: 1px 1px 0px 1px;
border: 1px solid dimgrey;
display: inline-block;
}
.chooseGreens input:checked+label{
border-color: #000;
position: relative;
}
.chooseGreens input:checked +label:before{
content: '';
width: 2px;
height: 7px;
background-color: red;
display: inline-block;
position: absolute;
transform: rotate(-37deg);
top: 1px;
left: 2px;
}
.chooseGreens input:checked +label:after{
content: '';
width: 2px;
height: 7px;
background-color: red;
display: inline-block;
position: absolute;
transform: rotate(29deg);
top: 1px;
left: 5px;
}
/*單選框修改結束*/
/*開關效果開始*/
.addressHidden #addHidd{
display: none;
}
.addressHidden label{
width: 40px;
height: 20px;
border: 1px solid #888;
display: inline-block;
border-radius: 15px;
}
.addressHidden label span{
width: 20px;
height: 20px;
display: inline-block;
border-radius: 15px;
box-shadow: 1px 1px 1px #ccc;
background-color: white;
transition:all 0.5s;
}
.addressHidden #addHidd:checked+label{
background-color: greenyellow;
}
.addressHidden #addHidd:checked+label span{
transform: translateX(20px);
}
/*開關效果結束*/
/*
開關效果帶文字
*/
.shareToNet #shareNet{
display: none;
}
.shareToNet label{
display: inline-block;
width: 40px;
height: 20px;
border: 1px solid #888;
border-radius: 15px;
transition: 0.3s;
}
.shareToNet label .move{
display: block;
width: 20px;
height: 20px;
box-shadow: 1px 1px 1px #ccc;
border-radius: 50%;
background: white;
transition: 0.3s;
overflow: hidden;
}
.shareToNet #shareNet:checked+label{
background-color: greenyellow;
}
.shareToNet input:checked+label .move{
transform: translateX(20px);
box-shadow: none;
}
em{
font-size: 12px;
font-style: normal;
float: left;
width: 50%;
}
.shareToNet input:checked+label .move span{
transform: translateX(-20px);
}
.shareToNet .move span{
width: 40px;
display: block;
height: 20px;
text-align: center;
transition: .3s;
/*transform: translateX(-20px);*/
}
</style>
</head>
<body>
<div class="mask"></div>
<div class="drog">
<h2 class="title">
<span class="line"></span>
<span class="title_name">用戶注冊</span>
<span class="line"></span>
</h2>
<table>
<tbody>
<tr>
<td class="td_left">姓名:</td>
<td><input type="text" placeholder="請輸入姓名" class="userInput"></td>
</tr>
<tr>
<td class="td_left">密碼:</td>
<td><input type="text" placeholder="請輸入密碼" class="userInput"></td>
</tr>
<tr>
<td class="td_left">確認密碼:</td>
<td><input type="text" placeholder="請確認密碼" class="userInput"></td>
</tr>
<tr>
<td class="td_left">性別選擇:</td>
<td class="chooseGender">
<input type="radio" name="gender" id="chooseMan">
<label for="chooseMan"></label>男
<input type="radio" name="gender" id="chooseGirl">
<label for="chooseGirl"></label>女
</td>
</tr>
<tr>
<td class="td_left">喜愛的菜系:</td>
<td class="chooseGreens">
<input type="checkbox" name="greens" id="food_z">
<label for="food_z"></label>浙菜
<input type="checkbox" name="greens" id="food_x">
<label for="food_x"></label>湘菜
<input type="checkbox" name="greens" id="food_y">
<label for="food_y"></label>粵菜
<input type="checkbox" name="greens" id="food_j">
<label for="food_j"></label>京菜
<input type="checkbox" name="greens" id="food_s">
<label for="food_s"></label>蘇菜
</td>
</tr>
<tr>
<td class="td_left">個人簡介:</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td class="td_left">地址匿名:</td>
<td class="addressHidden">
<input type="checkbox" id="addHidd">
<label for="addHidd">
<span></span>
</label>
</td>
</tr>
<tr>
<td class="td_left">分享到社交網絡:</td>
<td class="shareToNet">
<input type="checkbox" id="shareNet">
<label for="shareNet">
<span class="move">
<span>
<em>on</em>
<em>off</em>
</span>
</span>
</label>
</td>
</tr>
<tr>
<td class="td_left"></td>
<td>
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
