css3特效搜索（css3的新特性）

本文目录

• css3的新特性
• 怎么做一个网站现在只会用HTML5和css3做前端，特效找网上的代码，然后后台呢怎么做完整的
• 百度空间CSS特效代码大搜索
• 小问题请问CSS如何做以下搜索框的效果JS也行
• html/css如何写出如下搜索框效果，请给出代码

css3的新特性

1: CSS3选择器部分
E[att^=“val“] 匹配具有att属性、且值以val开头的E元素
E[att$=“val“] 匹配具有att属性、且值以val结尾的E元素
E[att*=“val“] 匹配具有att属性、且值中含有val的E元素
E:root 匹配文档的根元素。在HTML中，根元素永远是HTML
E:nth-child(n) 匹配父元素中的第n个子元素E
E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
E:last-child 匹配父元素中最后一个E元素
E:first-of-type 匹配同级兄弟元素中的第一个E元素
E:only-child 匹配属于父元素中唯一子元素的E
E:only-of-type 匹配属于同类型中唯一兄弟元素的E
E:empty 匹配没有任何子元素（包括text节点）的元素E
:target 匹配相关URL指向的E元素
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
E:not(s) 匹配所有不匹配简单选择符s的元素E
E ~ F 匹配E元素之后的F元素

2、 CSS3特效部分1：圆角，阴影，渐变
border-radius
box-shadow
text-shadow
-webkit-gradient

3、 CSS3特效部分2：背景，边框背景
background-origin
background-clip
background-size
multiple backgrounds
border-image

4、 CSS3特效部分3： 变形
rotate
X/Y/Z
scale
translate
transform-origin,transition-property,transition-duration,
transition-timing-function,transition-delay’
skew
matrix

5、 CSS3特效部分4：动画
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
-webkit-animation-direction

怎么做一个网站现在只会用HTML5和css3做前端，特效找网上的代码，然后后台呢怎么做完整的

首先，不知道你要做什么类型的网站，只会html5和css3怎最多能排下页面，如果js不会写的话你很难交互，或者你页面数据填充直接用后台写吧，后台现在一般java或php的，个人的一般php搞定，其实如果你有一两编程门语言基础，php很快入手的，如果你根本没有，那你还是先学习变成语言吧，当然html5根本不算编程语言。
补充：网上完整的网站模板挺多的，当然是包括前后端的，我用过的有discuz，phpwind还有worldpress。。。其实你刚学的话感觉还是打好基础先，不理解看不懂，别人的东西还是别人的。

百度空间CSS特效代码大搜索

我给你提供一套 给你一套好看的CSS代码 (直接复制到CSS就可） 这个CSS代码 我感觉很好看 不信你试试 记得给我加分 BODY {BACKGROUND-POSITION: center 50%; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://mumayi1.999kb.com/pic/2006-10-05/6z5tigmubrg5yys9khjc.gif); } A:hover{LEFT: 1px; POSITION: relative; TOP: 1px; TEXT-DECORATION: underline} td,div{color:#F9E3F5} BODY{CURSOR: url(’http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani’) } A {CURSOR: url(’http://imgcache.qq.com/qzone/space_item/orig/0/3344.ani’) ;background-repeat: no-repeat;background-position: center;background-attachment: fixed;;CURSOR:url(’http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani’)}a:hover{CURSOR:url(’http://imgcache.qq.com/qzone/space_item/orig/0/3344.ani’)}a:hover {position:relative; left:1px; top:1px; clip:rect()} body{background-color:#FB7CC8}}body{CURSOR: url(’http://imgcache.qq.com/qzone/space_item/orig/13/3341.ani’);}body{a:hover{position:relative; left:1px; top:1px; clip:rect()}} BODY {scrollbar-face-color: #000000; scrollbar-shadow-color: maroon; scrollbar-highlight-color:#F9E3F5; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#F9E3F5; scrollbar-base-color: #000000; scrollbar-track-color: #000000; filter: chroma(color=#F9E3F5);} #header{height:150px;background:url(http://album.sina.com.cn/pic/454db7da020006fn) repeat;} #header div.lc{background:url(

) no-repeat top right} #header div.rc{background:url(http://sc.yunzi.net/sozai/line/14/14.gif) no-repeat top right} #header div.rc{background:url(

) no-repeat top center} #header div.tit{top:10px;left:80px;line-height:40px;font-size:35px;font-family黑体;FILTER: glow(color=#FF11A0,direction=2)} #header div.tit a.titlink{color:#F9058F;text-decoration:none} #header div.tit a.titlink:visited{color:#F9E3F5;text-decoration:none} #header div.desc{top:80px;left:40px;line-height:25px;font-size:20px;font-family黑体;FILTER: glow(color=#DA06F9,direction=3)} #tabline{top:199px} #tab{top:140px;padding-top:3px;padding-bottom:3px;background:url(http://www.mvzz.com/sck/fgx/fgx11/04.gif) repeat-x#F6E844;border-left:0px solid #F9E3F5;border-right:0pxsolid #F9E3F5}#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:0px;line-height:19px;color:#FF11A0;font-size:14px} #tab span{color:#FF11A0;font-size:14px} #tab a:link{color:#FF11A0;text-decoration:none;font-size:14px} #tab a:visited{color:#FF11A0;text-decoration:none;font-size:14px} #tab a:visited{ color:#FF11A0; text-decoration:blink; font-size:14px; filter: Glow(Color=#F9E3F5, Strength=7); font-weight: bold; } #tab2{background:#FF11A0} #tab2 span{color:#FF11A0;font-size:14px;font-weight:bold} #tab2 a{font-size:12px} #tab2 a:link{color:#DA06F9} #tab2 a:visited{color:#DA06F9}.stage{background:transparent} #tabline{top:0px;background:transparent;background-color:#F9E3F5} #tab{top:130px;background:transparent;background:url(http://hometown.aol.com/slimprincess3/pagee/sparklebanner.gif)} #tab a.on,#tab a.on:link,#tab a.on:visited{border: 1px dotted #F9E3F5;} #tab span{color:#F9E3F5;font-size:14px} #tab a:link{ color:#F9E3F5; text-decoration:blink; font-size:14px; filter: Glow(Color=FF11A0, Strength=7); font-weight: bold;} #tab a:visited{ color:#F9E3F5; text-decoration:blink; font-size:14px; filter: Glow(Color=FF11A0, Strength=7); font-weight: bold;} #tab2{background:#FF11A0} #tab2 span{color:#F9E3F5;font-size:12px;font-weight:bold} #tab2 a{font-size:12px} #tab2 a:link{color:#DA06F9} #tab2 a:visited{color:#DA06F9} .stage{background:url(

“ target=“_blank“ 》



) no-repeat bottom right} #m_mylink1 div.item{ filter: glow(color=#F9E3F5,strength=3);color:#AD06FB;font-size:25px;font-size:30px;line-height:60px;text-indent:220px;background:url(

) no-repeat;} #m_mylink1 div.item a{color:#FF11A0;font-size:40px;text-decoration:none} #m_mylink1 div.item a:visited{color:#3399CC} #m_mylink1 div.line{margin-top:2px;line-height:30px;border-top:px solid #D2E9F4 ;background:url(

)} #comm_info{background:url() repeat} #comm_info {filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:15px;font-size:18px} #comm_info div.line{filter: glow(color=#F9E3F5,strength=3);color:#cccccc;font-size:12px;font-size:12px;background:url(

“ target=“_blank“ 》



) repeat-x;background:url(http://www.ip.cn/s.php) no-repeat bottom;padding-bottom: 40px; margin-bottom: 10px } #comm_info a{display:none} /**/#page{height:30px;font-size:14px;font-family:Arial;text-align:center} #page span{padding:3px;color:#FF11A0;font-size:14px;font-weight:bold} #page a.pc{color:#FF11A0;font-size:14px;font-weight:bold} #page a.pc:visited{color:#FF11A0} #page a.pi{padding:3px;color:#FF11A0;font-size:14px} #page a.pi:visited{color:#FF11A0} /**/.mod{margin-bottom:4px} .modhandle{cursor:move} .modth{height:24px} .modhead{padding:4px 4px 0 4px;text-align:center} .modopt{padding:4px 4px 0 0} .modtit{color:#FF11A0;font-size:14px;font-weight:bold}a.modtit{color:#FF11A0}a.modtit:visited{color:#FF11A0} .modtitlink{color:#FF11A0;font-size:14px;font-weight:bold}a.modtitlink{color:#FF11A0;text-decoration:none}a.modtitlink:visited{color:#FF11A0;text-decoration:none}a.modtitlink:hover{color:#FF11A0;text-decoration:underline} .modact{color:#FF11A0;font-size:14px}a.modact:link{color:#FF11A0}a.modact:visited{color:#FF11A0} .modbox{padding:10px 10px 0 10px} #phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 18x;HEIGHT: 32px} .modtl{background:url();border-top:0px solid #C9F1F1;border-left:1px solid #C9F1F1;line-height:0px;filter:alpha(opacity=0)}/*opacity=0,完全透明*/} .modtc{background:url();;border-top:0px solid #C9F1F1;filter:alpha(opacity=200)}/*opacity=0,完全透明*/} .modtr{background:url();;border-top:0px solid #C9F1F1;border-right:1px solid #C9F1F1;line-height:0px;filter:alpha(opacity=0)}/*opacity=0,完全透明*/} #pvshow{font-family:Georgia;font-size:20pt;} #m_blog{ overflow-y:auto;height:1000px; scrollbar-face-color: #000000; scrollbar-shadow-color: maroon; scrollbar-highlight-color:#F9E3F5; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#F9E3F5; scrollbar-base-color: #000000; scrollbar-track-color: #000000; filter: chroma(color=#FFFFFF);} #m_blog{overflow-y:auto;height:900px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=100);-moz-opacity:0.8;width:auto !important;width:100%} #m_blog div.tit{filter: glow(color=#FF11A0,strength=3);color:#FF11A0;font-size:12px;font-size:15px;font-weight:bold;background:url(http://bbsimg.qq.com/2005/11/19/006/675.gif) no-repeat top left;text-indent:22px;height:70px;line-height:75px} #m_blog div.tit a{filter: glow(color=#FF11A0,strength=3);color:#FF11A0;font-size:12px;font-size:15px;font-weight:bold;background:url() no-repeat top left;text-indent: 22px;height:70px;line-height:75px} #m_blog div.tit a:visited{color:#FF11A0} #m_blog div.date{margin:5px 0 8px 0;color:#AECC33} #m_blog div.cnt{filter: glow(color=#FCFCCF,strength=5);color:#FF11A0;font-size:12px;font-size:16px} #m_blog div.more{margin:14px 0 16px 0} #m_blog div.more a{color:#FF11A0;font-size:14px} #m_blog div.more a:visited{color:#FF11A0} #m_blog div.opt{color:#FF11A0;font-size:12px} #m_blog div.opt a{color:#FF11A0;font-size:12px} #m_blog div.opt a:visited{color:#FF11A0} #m_blog div.line{margin-top:17px;line-height:37px;background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102147967.gif) repeat-x} #m_blog {background: url(““) repeat} #m_blog div.none{padding:100px 0 100px 0;color:#FF11A0;font-size:14px} /**/ #mod_profile{background:url(

) no-repeat right top} #m_pro{background:url(

) no-repeat right top} #m_pro a{color:pink} #m_pro a:visited{color:pink} #m_pro div.image{text-align:center;background:url(

) no-repeat } #m_pro div.act{margin-top:10px} #m_pro div.user{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:16px;font-weight:bold;text-align:center} #m_pro div.desc{filter: glow(color=#F9E3F5,strength=3);color:#DA06F9;font-size:14px;text-align:center} #m_pro div.line{margin-top:17px;line-height:17px;border-top:1px solid #D71864} #m_pro td{filter: glow(color=#F9E3F5,strength=3);color:#DA06F9;font-size:14px} #m_album div.image{text-align:center;background:url(

) no-repeat bottom;padding-bottom:200px} #m_album div.page{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:14px;text-align:center} #m_album div.page a{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:14px} #m_album div.page a:visited{color:#FF11A0} #m_links{ overflow-y:auto;height:1000px; {scrollbar-face-color: #000000; scrollbar-shadow-color: maroon; scrollbar-highlight-color:#F9E3F5; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#F9E3F5; scrollbar-base-color: #000000; scrollbar-track-color: #000000; filter: chroma(color=#FFFFFF);} #m_links{overflow-y:auto;height:1030px} #m_links div.item{{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:15px;font-size:15px;line-height:30px;text-indent:30px;background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102242883.gif) no-repeat;} #m_links div.item a{color:#DA06F9;font-size:15px;text-decoration:none} #m_links div.item a:visited{color:#DA06F9} #m_links div.line{background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102147495.gif);line-height:30px} #m_links {background: url(“http://bbs.muwen.com/fileuploaddir/55315129749.gif“) repeat} #m_artclg div.item{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:17px;font-size:17px;line-height:30px;text-indent:30px;background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102242883.gif) no-repeat;} #m_artclg div.item a{color:#DA06F9;font-size:15px} #m_artclg div.item a:visited{color:#DA06F9} #m_artclg div.line{background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102147274.gif);line-height:21px} #m_artclg {background: url(“http://bbs.muwen.com/fileuploaddir/55315134733.gif“) repeat} #mod_artclg{background:url(http://city.9sky.com/non-cgi/usr/27/27_4200_358.gif) no-repeat right bottom } #m_comment{ overflow-y:auto;height:1000px; {scrollbar-face-color: #000000; scrollbar-shadow-color: maroon; scrollbar-highlight-color:#F9E3F5; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#F9E3F5; scrollbar-base-color: #000000; scrollbar-track-color: #00000; filter: chroma(color=#FFFFFF);} #m_comment{overflow-y:auto;height:730px} #m_comment div.item{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:15px;font-size:15px;line-height:30px;text-indent:30px;background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102242883.gif) no-repeat;}#m_comment div.item a{color:#DA06F9;font-size:14px} #m_comment div.item a:visited{color:#DA06F9} #m_comment div.item a.cnt{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:14px;font-size:14px;text-decoration:none} #m_comment div.item a.cnt:visited{color:#FF11A0;text-decoration:none} #m_comment div.item a.cnt:hover{color:#FF11A0;text-decoration:underline} #m_comment div.line{margin-top:3px;line-height:27px;background:url(http://www.apoints.com/sucai/UploadFiles_5610/200607/20060731102015887.gif) repeat-x} #mod_comment{background:url(http://www.bolizun.org/bolizun/sucai/pixel/hang/001/083.gif) no-repeat center} #m_comment {background: url(“http://bbs.muwen.com/fileuploaddir/55315129749.gif“) repeat}#mod_links.mod{background:url(

) no-repeat;background-position:bottom;padding-bottom: 120px;} /**/#m_albumlist{background:url() repeat} #m_albumlist div.note{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:12px;font-size:12px} #m_albumlist div.desc{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F9E3F5;font-size:14px} #m_albumlist div.none{padding:100px 0 100px 0;color:#FF11A0;font-size:14px} #m_albumlist div.line{margin-top:10px;line-height:16px;border-top:1px solid #DA06F9} #m_albumlist div.tit{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:12px;font-size:12px} #m_albumlist div.tit a{color:#FF11A0;font-size:14px} #m_albumlist div.tit a:visited{color:#FF11A0} #m_albumlist span.count{color:#F9E3F5;font-size:15px;font-weight:bold} #m_albumlist span.size{color:#F9E3F5;font-size:15px;font-family:Arial} #m_albumlist a.act{color:#FF11A0;font-size:15px} #m_albumlist a.act:visited{color:#FF11A0} #m_albumlist a.page{color:#FF11A0 ;font-size:14px} #m_albumlist a.page:visited{color:#FF11A0 } #m_albumlist td.image{padding:5px;border:1px solid#F9E3F5;background:#F9E3F5} #m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#FF11A0;font-size:14px} #m_friend div.user{margin-top:4px;color:#F9E3F5;font-size:12px} #m_friend div.user a{color:#FF11A0;font-size:12px} #m_friend div.user a:visited{color:#FF11A0} #m_friend div.line{margin-top:10px;line-height:16px;border-top:1px solid #FF11A0} #m_setting a{color:#FF11A0} #m_setting a:visited{color:#FF11A0} #m_setting{line-height:22px;color:#F9E3F5;font-size:14px} #m_setting img.sel{border:4px solid #FF11A0} #m_setting img.unsel{border:1px solid #F9E3F5} #m_setting span.tit{font-size:14px} #in_comment{width:710px} #in_comment div.tit{margin-bottom:14px;color:#FF11A0;font-size:14px;font-weight:bold} #in_comment div.user{margin-bottom:6px;color:#FF11A0;font-size:14px} #in_comment div.user a{color:#FAA511;font-size:14px} #in_comment div.user a:visited{color:#FF11A0} #in_comment div.user span.date{color:#FF11A0;font-size:14px} #in_comment div.desc{filter: glow(color=#F9E3F5,strength=3);color:#FF11A0;font-size:16px;font-size:16px} #in_send div.tit{margin:10px 0 10px 0;color:#FF11A0;font-size:14px;font-weight:bold}#spBlogCmtText {border: 5px solid #FF11A0;background:url(

)

小问题请问CSS如何做以下搜索框的效果JS也行

不好意思刚弄错了，box-shadow是吧？这个代码在chrome里可以。

《html》
 《head》
  《title》测试《/title》
  《style type=“text/css“》
   .inputBox{
    border:3px solid rgb(247, 242, 242);
    width:350px;
    height:30px;
   }
   .inputBox:focus{
    border:1px solid rgb(212, 235, 247);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   }
   .btnBox{
    width:50px;
    height:30px;
    background:white;
   }
  《/style》
 《/head》
 《body》
  《input type=“text“ class=“inputBox“》
  《input type=“button“ value=“Go!“ class=“btnBox“》《/input》
 《/body》
《/html》

html/css如何写出如下搜索框效果，请给出代码

首先来张效果图，这是写好的效果

代码如下：

上面的背景图片也就是那个放大镜需要你自己找下哦
纯手打，采纳吧，谢谢！