生活随笔
收集整理的這篇文章主要介紹了
CSS3 实现厉害的文字和输入框组合效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在忙著弄網站，學到了不少效果，這又是一個厲害的
?
?
?
Html代碼??
<html>??????<head>??????????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"/>??????????<title>發送微博頁面</title>????<style>??html{padding:0px;margin:0px;}??body{padding:0px;margin:0px;text-align:center;}????/**?彈出層背景?**/??.pop-bg{filter:alpha(opacity=10);?-moz-opacity:0.1;?-khtml-opacity:?0.1;?opacity:?0.1;border-radius:?15px;box-shadow:?0?1px?1px?rgba(255,?255,?255,?0.8)?inset,?1px?1px?3px?rgba(0,?0,?0,?0.2),?0?0?0?4px?rgba(188,?188,?188,?0.5);}??.pop-body{padding:10px;}??.pop-body-title{float:left;border-radius:?10px;width:100%;border:1px?solid?#4096ee;}??.title-text{float:left;color:?black;?font-size:?22px;padding-left:10px;}??.title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}??.title-close?a{text-decoration:?none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}??.title-close?a:hover{text-decoration:?none;color:red;display:?inline-block;background:#c0d3e7;border-radius:?5px;padding-left:5px;padding-right:5px;}????/**?內容部份?**/??.pop-body-context{??????border-radius:?10px;width:100%;border:1px?solid?#4096ee;??????float:left;??????margin-top:15px;??}????.pop-body-c-title{??????float:left;????????}????.a-btn{??????-moz-border-bottom-colors:?none;??????-moz-border-image:?none;??????-moz-border-left-colors:?none;??????-moz-border-right-colors:?none;??????-moz-border-top-colors:?none;??????-moz-transition:?all?0.3s?linear?0s;??????background:?-moz-linear-gradient(center?top?,?#FEDA71?0%,?#FEBB4A?100%)?repeat?scroll?0?0?transparent;??????border-color:?#F5B74E?#E5A73E?#D6982F;??????border-radius:?4px?4px?4px?4px;??????border-style:?solid;??????border-width:?1px;??????box-shadow:?0?1px?1px?#D3D3D3,?0?1px?0?#FEE395?inset;??????display:?inline-block;??????float:?left;??????height:?34px;??????margin:?10px;??????margin-right:?3px;??????margin-left:?4px;??????overflow:?hidden;??????padding:?5px?130px?0?0px;??????position:?relative;??????text-decoration:?none;??}??.a-btn-text{??????padding-top:5px;??????display:block;??????font-size:14px;??????white-space:nowrap;??????color:#996633;??????text-shadow:0?1px?0?#fedd9b;??????-webkit-transition:all?0.3s?linear;??????-moz-transition:all?0.3s?linear;??????-o-transition:all?0.3s?linear;??????transition:all?0.3s?linear;??????font-weight:bold;??}??.a-btn-slide-text{??????position:absolute;??????top:35px;??????left:0px;??????width:auto;??????height:0px;??????background:#fff;??????color:#996633;??????font-size:13px;??????white-space:nowrap;??????font-family:Georgia,?serif;??????font-style:italic;????????????overflow:hidden;??????line-height:40px;??????-webkit-box-shadow:-1px?0px?1px?rgba(255,255,255,0.4),?1px?1px?1px?rgba(0,0,0,0.5)?inset;??????-moz-box-shadow:-1px?0px?1px?rgba(255,255,255,0.4),?1px?1px?1px?rgba(0,0,0,0.5)?inset;??????box-shadow:-1px?0px?1px?rgba(255,255,255,0.4),?1px?1px?1px?rgba(0,0,0,0.5)?inset;??????-webkit-transition:height?0.3s?linear;??????-moz-transition:height?0.3s?linear;??????-o-transition:height?0.3s?linear;??????transition:height?0.3s?linear;??}??.a-btn-icon-right{??????position:absolute;??????right:0px;??????top:0px;??????height:41px;??????width:130px;??????border-left:1px?solid?#f5b74e;??????-webkit-box-shadow:1px?0px?1px?rgba(255,255,255,0.4)?inset;??????-moz-box-shadow:1px?0px?1px?rgba(255,255,255,0.4)?inset;??????box-shadow:1px?0px?1px?rgba(255,255,255,0.4)?inset;??}??.a-btn:hover{??????height:65px;??????-webkit-box-shadow:0px?1px?1px?rgba(255,255,255,0.8)?inset,?1px?1px?5px?rgba(0,0,0,0.4);??????-moz-box-shadow:0px?1px?1px?rgba(255,255,255,0.8)?inset,?1px?1px?5px?rgba(0,0,0,0.4);??????box-shadow:0px?1px?1px?rgba(255,255,255,0.8)?inset,?1px?1px?5px?rgba(0,0,0,0.4);??}?????.a-btn:hover?.a-btn-text{??????text-shadow:1px?1px?1px?rgba(0,0,0,0.2);??????color:#fff;??}??.a-btn:hover?.a-btn-slide-text{??????height:40px;??}??.a-btn-slide-text?input{??????float:left;??????margin-top:4px;??????margin-left:2px;??}??.pop-body-c-text{??????padding-left:3px;??}??.pop-body-c-textarea{??????width:780px;??????height:100px;??}??.pop-body-row-u{??????padding-top:5px;??????padding-left:10px;??}??.a-t-i-r-t{??????font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;??}????.pop-body-images-l{??????padding:10px;????????}????.pop-body-ims-panel{??????padding:10px;??}????.pop-b-i-i-img{??????border-radius:8px;??????float:left;??????position:relative;??????left:-20px;????????}??.pop-b-i-i-unit{??????float:left;??}??.pop-b-i-i-unit?input{??????float:left;??????position:relative;??????z-index:99;??}??</style>??????</head>????????<body>??????????<br?/>??????????<div?style="float:left;width:820px;height:200px;position:relative;left:100px;">??????????????<div?class="pop-bg"?style="float:left;position:relative;width:820px;height:200px;"></div>??????????????<div?class="pop-body"?style="float:left;text-align:left;position:relative;top:-200px;width:98%;">??????????????????????????????????<div?class="pop-body-title">??????????????????????<div?class="title-text">標題</div>??????????????????????<div?class="title-close"><a?href="#">關閉</a></div>??????????????????</div>????????????????????????????????????<div?class="pop-body-context">??????????????????????<div?class="pop-body-c-title">??????????????????????????<a?class="a-btn"?href="#">??????????????????????????????<span?class="a-btn-text">欄目名稱</span>??????????????????????????????<span?class="a-btn-icon-right"><div?class="a-t-i-r-t">請輸入</div></span>??????????????????????????????<span?class="a-btn-slide-text"><input?size="24"/></span>??????????????????????????</a>????????????????????????????<a?class="a-btn"?href="#">??????????????????????????????<span?class="a-btn-text">中文名稱</span>??????????????????????????????<span?class="a-btn-icon-right"><div?class="a-t-i-r-t"?>請輸入</div></span>??????????????????????????????<span?class="a-btn-slide-text"><input?size="24"/></span>??????????????????????????</a>????????????????????????????<a?class="a-btn"?href="#">??????????????????????????????<span?class="a-btn-text">英文名稱</span>??????????????????????????????<span?class="a-btn-icon-right"><div?class="a-t-i-r-t"?>請輸入</div></span>??????????????????????????????<span?class="a-btn-slide-text"><input?size="24"/></span>??????????????????????????</a>????????????????????????????<a?class="a-btn"?href="#">??????????????????????????????<span?class="a-btn-text">適配類型</span>??????????????????????????????<span?class="a-btn-icon-right"><div?class="a-t-i-r-t"?>請輸入</div></span>??????????????????????????????<span?class="a-btn-slide-text"><input?size="24"/></span>??????????????????????????</a>??????????????????????</div>??????????????????????????????????????</div>??????????</div>??????????</body>??</html>?? ?
轉載于:https://www.cnblogs.com/xiaochao12345/p/3922449.html
總結
以上是生活随笔為你收集整理的CSS3 实现厉害的文字和输入框组合效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
