给div添加漂亮的边框背景图

在项目中，给页面，尤其是监控页面这种需要美观的页面，添加一个漂亮的边框是非常高端大气上档次的，但是往往利用css样式去画这样的边框又很麻烦，最近突然发现，原来可以给div弄个漂亮的边框背景图片很容易就搞定了。

一个带阴影特效的背景图：

.graph_side{border:1px solid rgb(1,116,183);width:100%;position: relative;height:99%;margin:0px;/*box-shadow: inset 0px 0px 50px #094494;*/box-sizing:border-box;border-width:50px 37px 20px 132px;border-image:url(/img/border.png') 50 37 20 132;
}

给div添加样式：box-sizing:border-box;border-width:50px 37px 20px 132px;border-image:url(/img/border.png’) 50 37 20 132;
就可以啦！
当然这样加完以后，div中原本的元素位置可能会串，还需要将原本的元素绝对定位，然后重新调一下位置就可以啦！
下面是里面元素调的位置参数，记录一下，便于以后查找记录

最终的效果图

给div添加漂亮的边框背景图相关推荐

菜鸟也能当PS高手！PhotoWorks为你的图片添加漂亮的边框（教程+下载）
是否看过别人的网站或贴图上的图片有那么一个漂亮的边框,使整张图片都美观了?他们是怎么做到的? 给图片加边框对于PS高手来说是小菜一碟而已,但对于大多数的一般的朋友来说是一件很难的事情,为了这个去学Ph ...
python 绘图的背景颜色不要_matplotlib自定义添加 “哆啦A梦”背景图，这个操作真牛逼！...
为什么需要加星标? 由于微信公众号出现了 "乱序" 排列的状况,也就是说:文章不会按照 "时间顺序" 推送给你.那么朋友们就不能第一时间,收到我的干货.因此希望 ...
用 matplotlib 自定义添加 “哆啦A梦”背景图
matplotlib简介 matplotlib是Python数据分析"三剑客"中,用于进行绘图可视化的库.也是Python可视化库种大家最早接触的一个库,基于这个库,我们差不多可以 ...
matplotlib自定义添加 “哆啦A梦”背景图，这个操作真牛逼！
↑↑↑关注后"星标"简说Python 人人都可以简单入门Python.爬虫.数据分析简说Python推荐来源:数据分析与统计学之美作者:黄伟呢One old watch, li ...
如何利用CSS实现一款漂亮的无缝背景图
当我们用多个对象制作无缝图案时,我们需要处理对象在边界上的情况.通常我们创建对象的副本并将它们放置在适当的位置以使拼贴工作无缝衔接. 当我们用多个对象制作无缝图案时,我们需要处理对象在边界上的情况.通 ...
div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式
目录零.问题描述和基本情况介绍案例: 问题及疑问: 一.background-size:cover;和background-size:100%;的区别: 1.background-size:100 ...
windowbuilder怎么加背景图_小红书引流：爆款笔记封面图怎么做？（内附教程）...
大家好,我是小柯老师. 今天,我想给大家带来分享的主题是<小红书引流:爆款笔记封面图怎么做?> 很多宝宝在接触小红书博主这个行业之前,在听到一个有一定粉丝基础的博主仅仅通过写一篇笔记就可以 ...
HQChart使用教程88-DRAWTEXT添加背景色及边框
HQChart使用教程88-DRAWTEXT添加背景色及边框需求图 DRAWTEXT BACKGROUND 参数说明例子没有背景色,只有边框背景色,没有边框 ALIGN1,VALIGN0 小结 ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

给div添加漂亮的边框背景图

给div添加漂亮的边框背景图相关推荐

最新文章

热门文章