CSS3制作W3cplus的关注面板 <br />body {<br /> background-color: rgb(35, 35, 35);<br /> text-align: center;<br /> padding: 30px;<br />}<br />.region {<br /> width: 255px;<br /> padding: 0 10px;<br /> margin: 50px auto;<br /> color:rgba(255, 255, 255, 0.65);<br />}<br />.block {<br /> border: 1px solid rgba(255, 255, 255, 0.15);<br /> border-radius: 5px;<br /> box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),inset 0 0 0 150px rgba(150, 155, 150, 0.06);<br /> padding: 10px;<br /> position: relative;<br /> z-index: 0;<br /> margin: 0;<br /> text-align:left;<br />}<br />.block::before {<br /> content: "";<br /> position: absolute;<br /> z-index: -1;<br /> border: 1px dashed rgba(255, 255, 255, 0.15);<br /> top: 3px;<br /> bottom: 3px;<br /> left: 3px;<br /> right: 3px;<br /> box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);<br /> border-radius: 3px;<br />}<br />.block h2 {<br /> width: 237px;<br /> height: 35px;<br /> line-height: 35px;<br /> margin: 0 auto 10px -6px;<br /> position: relative;<br /> overflow: hidden;<br /> background: rgba(150, 155, 150, 0.3);<br /> background: -moz-linear-gradient(left, rgba(150, 155, 150, 0.3) 55%,rgba(155, 180, 150, 0.08) 85%);<br /> background: -webkit-gradient(linear, left center, right center, color-stop(55%,rgba(150, 155, 150, 0.3)), color-stop(85%,rgba(155, 180, 150, 0.08)));<br /> background: -webkit-linear-gradient(left, rgba(150, 155, 150, 0.3) 55%,rgba(155, 180, 150, 0.08) 85%);<br /> background: -o-linear-gradient(left, rgba(150, 155, 150, 0.3) 55%,rgba(155, 180, 150, 0.08) 85%);<br /> background: -ms-linear-gradient(left, rgba(150, 155, 150, 0.3) 55%,rgba(155, 180, 150, 0.08) 85%);<br /> background: linear-gradient(left, rgba(150, 155, 150, 0.3) 55%,rgba(155, 180, 150, 0.08) 85%);<br /> z-index:0;<br /> box-shadow: inset 5px 0px 10px 0px rgba(0, 0, 0, 0.3), inset 0 0 20px 0 rgba(0, 0, 0, 0.13),0 5px 3px -3px rgba(0,0,0,0.35);<br /> padding-left: 10px;<br />}<br />.block h2::before {<br /> content: "";<br /> display: block;<br /> border-top: 1px dashed rgba(255, 255, 255, 0.25);<br /> border-bottom: 1px dashed rgba(255, 255, 255, 0.25);<br /> position: absolute;<br /> top: 2px;<br /> bottom: 2px;<br /> left: 0;<br /> right: 0;<br /> box-shadow: inset 5px 0px 10px 0px rgba(0,0,0,0.3);<br />}<br /> .block h2::after {<br /> content:"";<br /> display: block;<br /> border: 17px solid #292929;<br /> border-color: transparent #292929 transparent transparent;<br /> width: 0;<br /> height: 0;<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br />}<br />/*follow us*/<br />#nav-ms li {<br /> cursor: pointer;<br /> height: 38px;<br /> position: relative;<br /> margin-bottom: 19px !important;<br /> list-style: none outside none;<br /> margin-left: 0;<br />}<br />#nav-ms a{<br /> background: #d91e76 url('') 3px 0 no-repeat;<br /> background-color: rgba(217,30,118, .42);<br /> border-radius: 19px;<br /> display: block;<br /> color: #fcfcfc;<br /> color:rgba(255, 255, 255, 0.8);<br /> width: 38px;<br /> font-size:16px;<br /> font-family:"SimHei";<br /> float: none;<br /> height: 38px;<br /> line-height: 38px;<br /> margin: 10px 0 0;<br /> text-align: left;<br /> text-indent: 50px;<br /> text-shadow: #333 0 1px 0;<br /> text-decoration: none;<br /> white-space: nowrap;<br /> z-index: 5;<br /> -webkit-transition:all .25s ease-in-out;<br /> -moz-transition:all .25s ease-in-out;<br /> -ms-transition:all .25s ease-in-out;<br /> -o-transition:all .25s ease-in-out;<br /> transition:all .25s ease-in-out;<br /> box-shadow: rgba(0,0,0, .28) 0 2px 3px; <br />}<br />#nav-ms .icon {<br /> color: #fafafa;<br /> overflow: hidden;<br />}<br />#nav-ms .ms-sina { <br /> background-color: rgba(249,13,20, .42); <br /> background-position: 0px 4px; <br />}<br />#nav-ms .ms-tq { <br /> background-color: rgba(11,142,185, .42); <br /> background-position: 2px -38px; <br />}<br />#nav-ms .ms-facebook { <br /> background-color: rgba(56,93,148, .42); <br /> background-position: -3px -171px; <br />}<br />#nav-ms .ms-twitter{ <br /> background-color: rgba(74,183,225, .42); <br /> background-position: 2px -83px; <br />}<br />#nav-ms .ms-rss { <br /> background-color: rgba(255, 109, 0, .42); <br /> background-position: 3px -215px; <br />}<br />#nav-ms .ms-google { <br /> background-color: rgba(10,164, 53, .42); <br /> background-position: 3px -260px; <br />}<br />#nav-ms .ms-github { <br /> background-color: rgba(253,190, 156, .42); <br /> background-position: 1px -126px; <br />}<br />#nav-ms li:hover a{<br /> text-decoration: none;<br /> color: #fff;<br /> width: 230px;<br /> background-color: #d91e76; <br />}<br />#nav-ms li:hover .ms-sina { <br /> background-color: rgba(249,13,20, 1); <br />}<br />#nav-ms li:hover .ms-tq { <br /> background-color: rgba(11,142,185, 1); <br />}<br />#nav-ms li:hover .ms-facebook { <br /> background-color: rgba(56,93,148, 1); <br />}<br />#nav-ms li:hover .ms-twitter { <br /> background-color: rgba(74,183,225, 1); <br />}<br />#nav-ms li:hover .ms-rss { <br /> background-color: rgba(255, 109, 0, 1); <br />}<br />#nav-ms li:hover .ms-google { <br /> background-color: rgba(10,164, 53, 1); <br />}<br />#nav-ms li:hover .ms-github { <br /> background-color: rgba(253,190, 156, 1); <br />}<br /> http://www.999jiujiu.com/ 关注我们 新浪微博 腾讯微博 Facebook Twitter 订阅RSS Google+ Github
