CSS3背景与边框相关样式

最新推荐文章于 2024-07-26 08:00:00 发布

UIEngineer

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量659

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79333322

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.background-clip

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        background-color:black;
        border:dashed 15px green;
        padding:30px;
        color:white;
        font-size:30px;
        font-weight:bold;
    }
    .div1{
        background-clip:border-box; 
    }
    .div2{
        margin-top:40px;
        background-clip:padding-box;
    }
    .div3{
        margin-top:40px;
        background-clip:content-box;
    }
</style>
</head>

<body>

    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>

</body>
</html>

这里写图片描述
2.background-origin

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        background-color:black;
        border:dashed 15px green;
        padding:30px;
        color:white;
        font-size:30px;
        font-weight:bold;
        background-image:url(demo.jpg);
        background-repeat:no-repeat;
    }
    .div1{
        background-origin:border-box;
        background-clip:border-box; 
    }
    .div2{
        margin-top:40px;
        background-origin:padding-box;
        background-clip:padding-box;
    }
    .div3{
        margin-top:40px;
        background-origin:content-box;
        background-clip:content-box;
    }
</style>
</head>

<body>

    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>

</body>
</html>

这里写图片描述

3.在一个元素中显示多个图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        background-image:url(images/00.jpg),url(demo.jpg);
        background-repeat:no-repeat,no-repeat;  /* 第一张图片不重复，第二张图片不重复 */
        background-position:100%,100%,center,center;
        width:1000px;
        height:800px;
    }
</style>
</head>

<body>

    <div></div>

</body>
</html>

这里写图片描述

2.使用图像边框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        -webkit-border-image:url('a.png') 0 57 0 57;
        width:800px;
        height:235px;
    }
</style>
</head>

<body>

    <div>示例文字</div>

</body>
</html>