码迷,mamicode.com
首页 > Web开发 > 详细

css给div设置水平垂直居中并且给边框添加图片样式

时间:2021-02-04 11:40:34      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:parent   div   mamicode   ima   并且   width   rgb   添加图片   处理   

代码如下:

<style type="text/css">
    .title{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 300px;
        height: 300px;
        font-size: 28px;
        text-align: center;
        line-height: 300px;
        border:15px solid transparent;
        -moz-border-image:url(./img/border.png) 30 30 round;    /* Old Firefox */
        -webkit-border-image:url(./img/border.png) 30 30 round;    /* Safari and Chrome */
        -o-border-image:url(./img/border.png) 30 30 round;        /* Opera */
        border-image:url(./img/border.png) 30 30 round;
    }
</style>
<div class="title" id="title">居中</div>

效果如图:

技术图片

 

 注意:使用的图片要做处理,如下

技术图片

 

css给div设置水平垂直居中并且给边框添加图片样式

标签:parent   div   mamicode   ima   并且   width   rgb   添加图片   处理   

原文地址:https://www.cnblogs.com/nanadang/p/14365579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!