html5学习笔记6-第二章上机实践

一、 margin:0px auto实现居中的原理：

auto就是“一样”的意思，如果是左右auto的话，意思就是：
这个 DIV 离 左边的距离 跟 右边的距离 是一样的。
margin:0px auto；就是上下的距离是0px，左右的距离是“一样”。

二、div阴影效果：

-webkit-box-shadow:5px 5px 20px #888;

X轴偏移量，Y轴偏移量，阴影模糊半径，阴影扩展半径，阴影颜色;

效果：

三、图片边框

在W3School学习了图片边框，不是很明白round和repeat的区别。

border-image 属性是一个简写属性，用于设置以下属性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

可能的值

例子1

代码：

在这里，图片铺满整个边框。


在这里，图片被拉伸以填充该区域。

这是我们使用的图片：


注释： Internet Explorer 不支持 border-image 属性。
border-image 属性规定了用作边框的图片。

图片：

效果：

wq在《H5从入门到精通》中的例子：

代码：

{
    height:120px;
    border-width:54px;
    -moz-border-image:url(images/border2.png) 33% repeat;
    -webkit-border-image:url(images/border2.png) 33% repeat;  
    -o-border-image:url(images/border2.png) 33% repeat;  
    border-image:url(images/border2.png) 33% repeat;  
   
}

原图：

效果：

四、文字阴影效果
代码：

 text-align: center;
    padding:24px;
    margin:0;
    font-family: helvetica, arial, sans-serif;
    color: #000;
    background:#000;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;

效果：

语法：

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

五、边框圆角效果

div {
    height:300px;
    width:300px;
    background:url(images/img9.jpg) no-repeat;
    border:1px solid red;
    -moz-border-radius:150px;
    -webkit-border-radius:150px;
    border-radius:150px;
}

效果：

div {
    height:300px;
    width:300px;
    background:url(images/img9.jpg) no-repeat;
    border:1px solid red;
    -moz-border-top-right-radius:300px 100px;
    -webkit-border-top-right-radius:300px 100px;
    border-top-right-radius: 300px 100px;

}

效果：

div {
    height:300px;
    width:300px;
    background:url(images/img9.jpg) no-repeat;
    border:1px solid red;
    border-radius: 300px/50px;
}

效果：