时间：2023-08-30 01:12:02 | 来源：网站运营
时间：2023-08-30 01:12:02 来源：网站运营
25个强大的CSS代码，据说这些是开发者经常遇到比较棘手的代码：这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS透明度，梯形环绕，CSS小三角等，希望对你有用
在线咨询
blockquote { background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"/201C""/201D""/2018""/2019";}blockquote:before { color:#ccc; content:open-quote; font-size:4em; line-height:.1em; margin-right:.25em; vertical-align:-.4em;}blockquote p { display:inline;} img { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin-top: -250px; /* Half the height */ margin-left: -250px; /* Half the width */} <?php ob_start ("ob_gzhandler"); header("Content-type: text/css; charset: UTF-8"); header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; header($ExpStr);?>body { color: red; } <div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div> .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black;}.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00;}.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green;}.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; } img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clearfix { display: inline-block; }/* start commented backslash hack /*/* html .clearfix { height: 1%; }.clearfix { display: block; }/* close commented backslash hack */ h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll;} /* external links */a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right;}/* emails */a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right;}/* pdfs */a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right;} .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */} textarea{ overflow:auto;} .wrapper { width:960px; margin:0 auto;} p { text-shadow: 1px 1px 1px #000; } .transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} .container { min-height: 10em; display: table-cell; vertical-align: middle;} .box { min-height:500px; height:auto !important; height:500px;} .page-break{ page-break-before:always;} #footer { position:fixed; left:0px; bottom:0px; height:32px; width:100%; background:#333;}/* IE 6 */* html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');} .rotate { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} a:link {color: blue;}a:visited {color: purple;}a:hover {color: red;}a:active {color: yellow;} ul.box { position: relative; z-index: 1; /* prevent shadows falling behind containers with backgrounds */ overflow: hidden; list-style: none; margin: 0; padding: 0;}ul.box li { position: relative; float: left; width: 250px; height: 150px; padding: 0; border: 1px solid #efefef; margin: 0 30px 30px 0; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}ul.box li:before, ul.box li:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 100px; height: 55%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg);}ul.box li:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg);} h1 { font-size: 72px; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
关键词：经常,遇到,强大,棘手
