九个常用的CSS属性

一、圆角效果

HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现。“border-radius”是实现这一功能的一个重要的属性,可以用来直接定义HTML元素的圆角,并且被所有现代浏览器支持。

CSS代码

[css]border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */[/css]

二、阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。

CSS代码

[css]#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}[/css]

三、@media属性

Media属性用于设置同一样式表在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。

CSS代码

[css]@media screen and (max-width: 480px){
/* 网页在宽度为480px屏幕上的显示样式 */
}[/css]

也可以使用@media print属性指定打印预览的样式:

[css]@media print
{
p.content { color: #ccc }
}[/css]

四、渐变填充

CSS3的Gradient(渐变)属性可以实现渐变填充,但因Gradient还未得到全部浏览器的支持,所以不能完全依赖Gradient来设置布局。

CSS代码

[css]background:
-webkit-gradient(linear,left top,left bottom,from(darkGray),to(#7A7A7A));[/css]

五、Background size

Background size属性用于设置背景图像的大小。以前背景图像的大小在样式中是不可调控的,如今使用Background size属性的一行代码就能实现用户想要的背景图像效果。

CSS代码

[css]div
{background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}[/css]

六、@font face 属性

CSS3中的@font face属性主要用于把自定义的Web字体嵌入到网页中。首先自定义字体的名称:

CSS代码

[css]@font-face
{
font-family: mySmashingFont;
src: url(‘blitz.ttf’)
,url(‘blitz.eot’); /* IE9 */
}[/css]

然后就可以在任何地方使用mySmashingFont字体系列:

CSS代码

[css]div
{
font-family:mySmashingFont;
}[/css]

七、clearfix属性

clearfix提供了更好的处理浮动的解决方案:

CSS代码

[css].clearfix {
display: inline-block;
}</pre>
<pre lang="CSS">.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}[/css]

八、Margin: 0 auto 属性

Margin: 0 auto属性是CSS的基础属性。虽然CSS语法并没有定义一个块元素居中的语句,但仍然可以使用auto margin选项来实现这个功能。这个属性可以根据需要居中一个元素。但要注意,需要给div设定宽度才会实现。

CSS代码

[css].myDiv {
margin: 0 auto;
width:600px;
}[/css]

九、Overflow: hidden

Overflow:Hidden这个CSS属性除了隐藏溢出功能外,还有清除浮动的作用。

CSS代码

[css]div
{
overflow:hidden;
}[/css]

原文地址:http://www.queness.com/community-news/12449/9-amazing-css-rules-that-save-designers-and-developersEOF

文章标签:

发表评论

4T66