网页制作 发布日期:2024/12/26 浏览次数:1
border-radius: 10px; /* CSS3 Property */我们也可以使用下面这样的组合版本,或者用它来对上面的代码进行速记。
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */
-moz-border-radius: 10px 20px 30px 0;而IE浏览器对CSS3属性支持,可以从这篇英文文章进一步了解。
#myDiv{而如下的JavaScript代码也能实现同样的阴影效果:
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}
object.style.boxShadow=“20px 10px 7px #ccc”3. @Media属性
@media screen and (max-width: 480px) {而使用如下的@media print甚至可以指定CSS的打印预览:
}
@media print4. 添加一个渐变填充
{
p.content { color: #ccc }
}
background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));5. 背景尺寸
div6 @font face
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}
@font-face而后我们能通过一个简单的代码,随时随地的使用自定义的mySmashingFont字体系列
{
font-family: mySmashingFont;
src: url(‘blitz.ttf’)
,url(‘blitz.eot’); /* IE9 */
}
div{font-family:mySmashingFont;}7. clearfix属性
.clearfix {
display: inline-block;
}
.clearfix:after {8. Margin: 0 auto
content: “。”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.myDiv {9. Overflow: hidden
margin: 0 auto;
width:600px;
}
divVia:Smashing HUB
{
overflow:hidden;
}