css编写的技巧效果总结
1. 垂直對齊
如果你之前遇到過這個問題，你就應該知道它是多么的煩人，幸運的是，現在你可以使用CSS3變換來解決這個問題：
.vc{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
2. 只在一側或者兩側具有投影
.box-shadow {
background-color: #AC92EC;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
3. 漸變背景動畫效果
從CSS3開始，動畫變得非常的酷了，但是切不可過分的使用它們。下面這一技巧巧妙地的移動背景位置，使其看起來像動畫一樣：
button {
padding: 15px;
background-image: linear-gradient(#FC6E51, #FFF);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
4. 將文本分成多列
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
5. 表格自動寬度
td {
white-space: nowrap;
}
6. 像出版物一樣，第一個字變得大些
p:first-child::first-letter{
font-family: "papyrus";
font-size: 28px;
font-weight: bold;
}
7. 特定瀏覽器的CSS Hacks的完整列表
有時候解決跨瀏覽器兼容性可能會非常的棘手，但這些特定瀏覽器的技巧可能會幫你解決問題。
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
8. 創建模糊文本
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
9. 不使用表格實現跨瀏覽器垂直水平居中圖片
這段代碼可以在一個已知寬高的容器內垂直水平居中一個未知大小的圖片，這是 IE 的一個hack：
<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
10. 高亮選中的 input
// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>
// CSS
input:checked + label{
background: yellow;
}
11. 跨瀏覽器透明度
selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12. CSS投影
// 外投影
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
// 內投影
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
13. 跨瀏覽器最小高度
#div {
min-height: 500px;
height:auto !important;
height: 500px;
}
14. 固定 Footer
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* 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');
}
15. 清除浮動 Clearfix
/* slightly enhanced, universal clearfix hack */
.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 */
16. 給可點擊元素添加手型光標
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
17. iPad 定向CSS
<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
18. Pre 標簽內文本換行
pre{
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
}
19. CSS3媒體查詢
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
20. 重置加載
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
21. 多邊框
元素必須是相對定位，且具有足夠的padding來顯示多余的邊框：
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
22. 移除IE中textarea的滾動條
textarea { overflow: auto; }
23. 簡單但好看的引用樣式
css-blockquote
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;
}
24. :-moz-placeholder
<!doctype html>
<html>
<head>
<title>Placeholder demo</title>
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
25. 另一種固定footer的方式
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
26. 背景透明
.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}
27. 居中未知寬度的DIV元素
.content {
margin: 0 auto 8px;
display: table;
}
.content div {
display: table-cell;
}
<!--[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]-->
28. 根據文件類型設置樣式
/* external links */
a[href^="http://"]
{
padding-right: 13px;
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: 18px;
background: url(acrobat.png) no-repeat center right;
}
29. 解決IE6/7雙倍margin/padding問題
ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */
30. 更改選中文本的樣式
::selection
{
color: white;
background-color: red;
}
::-moz-selection /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}
31. 首字下沉
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
?
32、如何清除圖片下方出現幾像素的空白間隙？
方法1：
img{display:block;}
方法2：
img{vertical-align:top;}
除了top值，還可以設置為text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以
方法3：
#test{font-size:0;line-height:0;}
#test為img的父元素
?
33、如何讓文本垂直對齊文本輸入框？
方法：
input{vertical-align:middle;}
?
34、為什么Standard mode下IE無法設置滾動條的顏色？
方法：
html{
scrollbar-3dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}
?
35、如何讓未知尺寸的圖片在已知寬高的容器內水平垂直居中？
方法：
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父節點，p是img的父節點。Know More：未知尺寸的圖片如何水平垂直居中
?
36、如何容器透明，內容不透明？
方法1：
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}
<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的內容</div>
原理是容器層與內容層并級，容器層設置透明度，內容層通過負margin或者position絕對定位等方式覆蓋到容器層上
方法2：
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}
<div class="outer">
<div class="inner">我是不透明的內容</div>
</div>
高級瀏覽器直接使用rgba顏色值實現；IE瀏覽器在定義容器透明的同時，讓子節點相對定位，也可達到效果
?
37、如何做1像素細邊框的table？
方法：
#test{border-collapse:collapse; border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}
<table id="test">
<tr><th>姓名</th><td>Joy Du</td></tr>
<tr><th>年齡</th><td>26</td></tr>
</table>
?
38、如何使頁面文本行距始終保持為n倍字體大小的基調？
方法：
body{line-height:n;}
?
39、如何解決IE6下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？
a,span{display:block;background:#ddd;}
<ul>
<li><a href="http://css.doyoe.com/">CSS參考手冊</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端實驗室</a></li>
<li><span>測試li內部元素為設置了display:block的內聯元素時底部產生空白</span></li>
</ul>
如上代碼，IE6及更早瀏覽器每個li內部的內聯元素底部都會產生空白。解決方案是給li內部的內聯元素再加上zoom:1
?
40、如何區別display:none與visibility:hidden？
方法：
相同的是display:none與visibility:hidden都可以用來隱藏某個元素； 不同的是display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位空間仍然保留。
?
41、如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？
方法：
li{vertical-align:top;}
除了top值，還可以設置為text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以
轉載于:https://www.cnblogs.com/design-engineer/p/5377759.html
總結
以上是生活随笔為你收集整理的css编写的技巧效果总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： string类的实现（构造函数，析构函数
- 下一篇： 代码走查内容