您的位置：首页 > Web前端 > CSS

CSS学习（四）-css边框样式（下）

2016-03-02 00:28 489 查看
一、理论：

1.注意***边框的图片的高与宽

2.边框宽度配合到位

3.切割边框背景图片合理

二、实践：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .border-image-btn{
            display: inline-block;
            border: 18px solid green;
            border-width: 0 18px;
            border-image: url("images/round-box1.jpg") 0 18 50 18;
            -webkit-border-image: url("images/round-box-2.jpg") 0 18 50 18;
            -moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
            -o-border-image: url("images/round-box1.jpg") 0 18 50 18;
            -moz-border-image: url("images/round-box1.jpg") 0 18 50 18;

            padding: 13px 10px 17px;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            line-height: 15px;
            margin: 10px;
        }

        .border-image-btn:hover{
            -webkit-border-image: url("images/round-box1.jpg") 0 18 50 18;
            -moz-border-image: url("images/round-box1.jpg") 0 18 50 18;
            -o-border-image:  url("images/round-box1.jpg") 0 18 50 18;
            -moz-border-image: url("images/round-box1.jpg") 0 18 50 18;

            color:#000;
            border-color: chartreuse;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#" class="border-image-btn">click me~</a>
    <a href="#" class="border-image-btn">click me~click me~</a>
    <a href="#" class="border-image-btn">click me~click me~click me~</a>
</body>
</html>
2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .tabs-box{
            border-bottom: 3px solid #9eaab6;
            margin: 0;
            padding: 0;
            overflow: hidden;
            zoom: 1;
        }
        .tabs-box li{
            float: left;
            display: inline;
            margin: 0 12px 0 0;
            list-style: none outside none;
            border: 1px solid #990099;
            padding: 5px;
            border-image: url("images/tabs-image.jpg") 0 5 0 5;
            -moz-border-image: url("images/tabs-image.jpg") 0 5 0 5;
            -webkit-border-image: url("images/tabs-image.jpg") 0 5 0 5;
            -o-border-image: url("images/tabs-image.jpg") 0 5 0 5;
            -ms-border-image: url("images/tabs-image.jpg") 0 5 0 5;
            border-width: 0 5px;
            text-align: center;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
            color:rgba(0,125,200,0.3);
        }
    </style>
</head>
<body>
    <ul class="tabs-box">
        <li>Home</li>
        <li>css</li>
        <li>html</li>
        <li>Javascript</li>
        <li>jQuery</li>
    </ul>
</body>
</html>
3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .border-image-drop-boxshadow{
            width: 150px;
            height: 50px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
            border-width: 7px 7px 16px;
            border-image: url("images/border-background.gif") 7px 7px 16px 7px;
            -moz-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
            -webkit-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
            -o-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
            -ms-border-image: url("images/border-background.gif") 7px 7px 16px 7px;
        }
        .box1{
            width: 100px;
            height: 50px;
        }
        .box2{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="border-image-drop-boxshadow box1">small</div>
    <div class="border-image-drop-boxshadow box2">big</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航