CSS3基础教程(九) - 博客详情

CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

1.边框的四个方向

border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

四边相同边框border简写，例如：

#div1 {border:1px solid #000}

2.常见的边框样式

3.outline

outline通常用于调试样式表时观察元素出现的位置。

outline 属性是上述 outline-width、outline-style、outline-color 三个属性的简写形式,在使用 outline 属性时，outline-width、outline-style、outline-color 这几个参数的顺序并不是固定的，可以根据自己的喜好随意改变它们的顺序。

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one {
            width: 200px;
            height: 80px;
            outline: solid 1px lightpink;
        }
        p.two {
            width: 180px;
            height: 60px;
            outline: #ccc groove 1px;
        }
        p.three {
            width: 200px;
            height: 100px;
            outline: 1px inset rgb(34, 34, 34);
        }
    </style>
</head>
<body>
<p class="one">lightpink</p>
<p class="two">#ccc</p>
<p class="three">rgb(34, 34, 34)</p>
</body>
</html>

运行效果：

outline和border显示效果类似。两者的区别是：

outline不占用网页布局空间。他是一种动态样式，只有在元素获得焦点或者被激活的时候呈现效果，突出元素的作用。border是盒模型的一部分。
outline创建的轮廓线四边都必须是一样的，而border可以不同。outline的外轮廓线必须闭合，不可以只设置一边。
outline创建的轮廓线可以向内扩展（将outline-offset设置为负值），而border只能向内。

4.框架综合实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }

        #box1{
            border: 1px solid #000;
        }

        #box2{
            border:1px solid #000;
            border-radius:25px;
            -moz-border-radius:25px; /* Old Firefox */
        }

        #box3{
            border:1px solid #000;
            border-radius:25px;
            box-shadow: 10px 10px 5px #888888;
            -moz-border-radius:25px; /* Old Firefox */
        }
        #box4{
            width:400px;
            height:100px;
            border:10px double orange;
            -webkit-border-image:url(http://img.simoniu.com/css_border.png) 27 round;
            border-image:url(http://img.simoniu.com/css_border.png) 27 round;
        }

    </style>
</head>
<body>
<h1>CSS边框</h1>

<div id="box1">
</div>

<br>

<div id="box2">
</div>
<br>
<div id="box3">
</div>
<br>
本身的边框素材：
<img src="http://img.simoniu.com/css_border.png">
<br>
<div id="box4">
</div>

</body>
</html>

运行效果：

盒子鼠标悬停特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>样本</li>
    <li>样本</li>
    <li>样本</li>
    <li>样本</li>
    <li>样本</li>
</ul>
<style>
    ul {
        display: block;
        margin: 0px auto;
        width: 80%;
    }
    ul li {
        float: left;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        margin: 10px;
        background-color: #fdfcfc;
        list-style: none;
    }
    ul li:hover {
        transform: scale(1.01, 1.01);
        box-shadow: 0 5px 10px #d8ecfd;
        cursor: pointer;
    }
</style>

</body>
</html>

运行效果：