发布时间:2024-07-09 10:01
使用css的特有属性,给不同的盒子添加边框图片。
为什么会有这一场景呢。因为,UI给我们前端的边框图片可能未必适合我们当前的内容。
这里我们主要使用到的属性有:
border-image-source
border-image-slice
border-top-width
border-image-repeat
个别属性可以根据自己的个人情况决定是否添加,希望使用的时候自己甄别。
切边框图片的顺序:
下面是我的代码案例
Document* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul li {
list-style: none;
}
.box1 {
width: 300px;
height: 300px;
margin: 100px;
border: 5px solid #000;
border-image-source: url(./1.png);
/* 背景图片路径 */
border-image-slice: 10 20 20 20;
/* 如何切割图片 */
border-top-width: 5px;
/* 图片的宽度是多少 */
/* border-image-repeat: stretch; 默认是stretch */
/* border-image-repeat: round; */
/* round 是环绕 */
}
.box2 {
width: 300px;
height: 300px;
margin: 150px;
border: 5px solid #000;
border-image: url(./2.png) 40 / 10px;
/* 顺序为上左下右,如果4个值一样,那么就可以省略写成一个值 ,注意,这里不要加px
border-image 后面的/ 的意思是我切完图,将图放在多少个像素中的边框中去,
如果不写,就默认按照上面border中的像素去填充 */
/* 如果默认不写就是拉伸 stretch */
}
.box3 {
width: 300px;
height: 300px;
margin: 250px;
/* background-color: hotpink; */
border: 5px solid #000;
border-image: url(./3.png) 40 / 10px repeat;
}
我是盒子一
我是盒子二
我是盒子三(边框颜色有点浅哦)
三张边框图片素材,我也上传上来了。仅供参考。
代码效果图如下:
使用CSS设置边框和背景
一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...
css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法:
...Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
设置按钮背景图片(HTML-CSS)
很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片 ...
css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
随机推荐
c语言第一章第一节 认识变量
声明:本人大一新生,闲着无聊..写写c语言教程..菜鸟一枚..大神勿喷!!! 接下来我们都用dev来进行编译..vc++太古老了,没提示功能,不好上手,并且老是出毛病..vs太大了,编个c不至于,运行 ...
CKEditor与CKFinder的配置(ASP.NET环境)
CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...
Tkinter教程之Text(2)篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811347 '''Tkinter教程之Text(2)篇''''''6.使用tag来指定文本的属 ...
PHP静态延迟绑定简单示例
没怎么用过这个新特性,其实也不算新啦,试试吧,现在静态类的继承很方便了
这种方法在受到.NET版本和访问注册表权限时,是最佳解决方案,虽然代码看起来很多,不过下面的类直接拿走用就可以了。
public class FileContentType { private static IDictionary _mappings = ne ...
部署Sharding分片
这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在sharding 的各个节点上,使用者通过简单的配置就可以很方便地构建一个分布式MongoDB 集群. MongoDB 的数据分块称为 ch ...
使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
(转)SimpleDateFormat使用
1 SimpleDateFormat public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化 ...
ruby rails_autolink不能加载的原因
从rails 3.1.0开始,默认在ActionView::Helper::TextHelper中的auto_link方法已经被移除,放到了第三方的gem里:rails_autolink.遂想试一下其 ...
[Linux]php+apache 和 php+nginx的区别
apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php1. PHP 解释器是否嵌入 Web 服务器进程内部执行mod_php 通过嵌入 PHP 解 ...