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

最新推荐文章于 2022-10-21 13:53:25 发布

原创最新推荐文章于 2022-10-21 13:53:25 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中的一些实用技巧，包括使用margin实现元素居中、为div添加阴影效果、设置图片边框、添加文字阴影以及实现边框圆角等。

一、 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

代码：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;	/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="/i/border.png">

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

</body>
</html>

图片：

效果：

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;  
   
}

原图：

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

效果：

四、文字阴影效果
代码：

 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;
}

效果：