Most used CSS tricks

1.无图片实现圆角

[cc lang="html"]







.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2.给列表加上样式
[cc lang="html"]

  1. This is line one

  2. Here is line two

  3. And last line

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3.无表格版form

[cc lang="html"]

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

4.Double blockquote

[cc lang="html"]
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

5.渐变文字效果
[cc lang="html"]

CSS Gradient Text

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

6.带line-height的竖直居中

[cc lang="html"]
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

Content here

7.背景图片实现圆角

[cc lang="html"]

width="15" height="15" class="corner"
style="display: none" />

CONTENT

width="15" height="15" class="corner"
style="display: none" />

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

8.多个class属性值
[cc lang="html"]

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9.水平居中
[cc lang="html"]

#container {
margin:0px auto;
}

10.首字下沉

[cc lang="html"]

This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap.

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11.禁止超链接换行及隐藏超过区域大小的内容
[cc lang="html"]
a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12.显示firefox滚动条,移除IE中文本域的滚动条
[cc lang="html"]
html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

译自:
Most used CSS tricks | StylizedWeb.com

更多
No Responses Post a comment

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS