CSS3干货27:CSS3 图片边框 border-image_border-image:url-程序员宅基地

技术标签: html5  HTML5_CSS3  css3  

 border-image

从名字上不难理解,它的作用是给边框添加图片。类似于CSS中的background(背景)属性,border-image属性可以给盒子边框添加背景图片。

一般的边框,要么是实线,要么是虚线(点状,短横线)(虽然也有其他样式的边框,但是不推荐使用)。

但是遇到一切特殊的边框,传统边框就束手无策了。

遇到这种边框,不妨考虑下用 border-image

注意:

  1. 使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。也即 solid,dotted,dashed等。

  2. 虽然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。不过,我们在使用 border-image 时,强烈建议把边框样式加上

border-image 属性是一个简写属性,用于设置以下属性:

border-image: url("images/xx.png")  位置  是否填充  重复性 ;

本文案例使用的图片:每个圆圈 30*30 大小。

 基本HTML:

<div class="box">
    这个是内容
</div>

基本样式:

*{
    margin: 0;
    padding: 0;
}
.box{
    padding: 20px;
    width: 210px;
    margin-left: auto;
    margin-right: auto;
    border:30px #f30 solid;  
}

1. border-image-source

图片来源地址。

对于border-image而言,border-image-souce 是唯一必需的。

若无特殊指定,其他属性即为默认值。

.box{
    border-image: url("images/border.png");
}

 黄色部分为 border 边框区域。

2. border-image-slice

边框图片切片。

border-image-slice [<number> | <percentage>]{1,4} && fill?

指定4个值(4条分割线:top, right, bottom, left)将 border-image-source 分割成 9 宫格,如下:  

border-image-slice 四条线的值类型为:number | percentage。

  • number :不带单位的数值,但是 1 代表 1个图片像素。千万不要给数值带单位哦。

  • percentage:百分比。

值(数值、百分比)可以写 1-4 个,理解方式参考 padding 和 margin 的值。

.box{
    /* 上下切片位:30px。左右切片位:20px*/
    border-image: url("images/border.png") 30 20;
}

fill “填充”:源图片 9 宫格的中心块将作为该元素的背景。

.box{
    border-image: url("images/border.png") 30 20 fill;
}

3. border-image-width

边框图片宽度。

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

border-image-width 参数的四种类型:

  • length:带 px, em, in … 单位的尺寸值

  • percentage: 百分比

  • number: 不带单位的数字;它表示 border-width 的倍数。

  • auto: 使用 auto, border-image-width 将会使用 border-image-slice 的值

border-image-width 的参数不能为负值。

border-image-width缺省值是 number 类型:1,即边框图片的宽度跟边框的宽度一致。

图中,边框图片所占的宽度为边框宽度 border-width 的 0.2。

4. border-image-outset

定义边框图像可超出边框的大小。

border-image-outset:[ <length> | <number> ]{1,4};
.box{
    border-image: url("images/border.png") 30 fill;
    border-image-width: 1;
    border-image-outset: 30px;
}

5. border-image-repeat

定义图片如何填充边框。

或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。

border-image-repeat:[ stretch | repeat | round | space ]{1,2} ;

stretch:拉伸。默认值。

.box{
    border-image: url("images/border.png") 30 fill stretch;
}

repeat:重复。可能出现图片不完整情况。

.box{
    border-image: url("images/border.png") 30 fill repeat;
}

round:平铺图像,当不能整数次平铺时,根据情况放大或缩小图像。

.box{
    border-image: url("images/border.png") 30 fill round;
}

space:平铺图像 。当不能整数次平铺时,会用空白间隙填充在图像周围(不会放大或缩小图像)

.box{
    border-image: url("images/border.png") 30 fill space;
}

案例:邮票风格的图片边框

明白了图片边框的原理。那么,之前给的效果就很好做了。

所用到的图片如下:

HTML:

<img src="images/w.jpg" class="img" alt="">

CSS:

*{
    margin: 0;
    padding: 0;
}
body{
    background: #888;
}
.img{
    border:31px #000 solid;
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-image: url("images/youpiao.png")  31  round;
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42703239/article/details/113819030

智能推荐

这博客玩不转,再换个地方-程序员宅基地

文章浏览阅读48次。http://blog.sina.com.cn/u/1760365785 转载于:https://blog.51cto.com/zhaochao/336261

Python爬虫笔记之css、xpath查找_soup xpath 查询-程序员宅基地

文章浏览阅读415次。文章目录前言操作符查找总结前言记录使用css查找元素的基本方法。操作符*:所有元素.xxx:class为xxx的元素#xxx:id为xxx的元素E:所有E标签E,F:所有E,F标签E F:E的所有F后代E>F:所有E中的F标签E+F:E之后的所有FE[att1=’…’][att2=’…’]:属性为…的E标签^=:以…开头,$=:以…结尾,*=:包含…E:contains(‘xxx’):内容包含xxx的E元素查找css("<查询条件>::<.._soup xpath 查询

js正则表达式 最多3位小数_js数字或三位小数的正则表达式-程序员宅基地

文章浏览阅读1.1w次,点赞4次,收藏8次。layui 中加js正则表达式验证1、正数,且最多3位小数//自定义验证 form.verify({ price: function(value, item) { //value:表单的值、item:表单的DOM对象 if (!new RegExp("(^$)|^[0-9]+(.?[0-9]{1,3})?$").test(value)) { //if (!new RegExp("^[\\+\\-]?[\\d]+(\_js数字或三位小数的正则表达式

springaop无法拦截service方法中调用_aop 不能拦截service-程序员宅基地

文章浏览阅读1k次。问题描述:springaop无法拦截service方法中调用,在service类中方法A调用带有切面注解的方法B,切面失效问题分析:AOP底层实现: 拦截器的实现原理就是动态代理,实现AOP机制。Spring 的代理实现有两种:一是基于 JDK Dynamic Proxy 技术而实现的;二是基于 CGLIB 技术而实现的。如果目标对象实现了接口,在默认情况下Spring会采用JDK的动态代理实现AOP; ***总之是类(接口类)级别的代理***;解决思路: 只要将方法A调用方法B过程中添加_aop 不能拦截service

Java实现二维码批量生成_java批量生成二维码-程序员宅基地

文章浏览阅读645次。Java批量生成二维码实例_java批量生成二维码

随便推点

docker安装mysql8.0,并挂载数据卷_docker mysql挂载-程序员宅基地

文章浏览阅读753次,点赞2次,收藏6次。ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '要修改的密码';把容器跑起来后,去用Navicat去连接,发现可以连上 —— 说明你的端口是开放的,什么防火墙没开啊,阿里云端口没开啊,都是扯蛋!vim /mydata/mysql/conf # 第一次跑起来的容器,查看conf里边是空的。#此时,下边的命令也不必执行了,因为它执行完,就是你删除完后的。# 查看mysql数据库下的user表,发现。# 再次测试,发现还是连接成功。_docker mysql挂载

git submodule使用以及注意事项_git submodule clone-程序员宅基地

文章浏览阅读2.7w次,点赞8次,收藏37次。一、背景在平时的软件开发过程中常常会有这样的场景,自己负责的某个模块会依赖其他模块或者第三方的library。这时你自己的模块是一个独立的代码仓库,你想要实现这样一种功能,当你从你的模块的代码仓库里把代码拉到本地来的时候,能自动的将你依赖的模块或第三方库都拉到指定的目录当中去。当然要实现这个功能的方法有很多,比如使用repo之类的工具,又比如如果你使用的是svn作为版本管理工具,那么你可以..._git submodule clone

Redis(五)- 异步秒杀引出消息队列_netcore redis取出队列消息-程序员宅基地

文章浏览阅读902次。Redis_netcore redis取出队列消息

SQLSERVER数据库全局字符搜索_declare tables scroll cursor-程序员宅基地

文章浏览阅读1.3k次。SQLSERVER数据库全局字符搜索前戏上代码说明:前戏为了提高整个数据库内容的搜索效率,我们要从一下几个方面去优化1.用游标把数据库的表遍历出来,并一个个表,一个个列去匹配,在遍历表前,需要把无内容的表,或者数据量十分巨大但可能过滤的意义不大的表(某些软件爱写日志,往往几十万,上百万行数据,鼎捷MES半年试运行1.5亿行日志就问你怕不怕)2. 变量列前,缩小遍历的类型,比如字符只搜索nvarchar或者varchar,如果找不到自行扩大数据类型.3.希望在搜索的过程中可以一直监视进度,但不能影响_declare tables scroll cursor

Day507.Linux下MySQL的安装与使用 -mysql-程序员宅基地

文章浏览阅读1.6k次,点赞6次,收藏12次。Linux下MySQL的安装与使用一、安装前说明1、Linux系统及工具的准备安装并启动好两台虚拟机: CentOS 7掌握克隆虚拟机的操作mac地址主机名ip地址UUID安装有 Xshell 和 Xftp 等访问CentOS系统的工具CentOS6和CentOS7在MySQL的使用中的区别防火墙:6是iptables,7是firewalld启动服务的命令:6是service,7是systemctl2、查看是否安装过MySQL如果你是用rpm安装, 检

python3 [爬虫实战] 微博爬虫京东客服之Selenium + Chrom浏览器的使用(上)_京东爬虫 对浏览器的要求-程序员宅基地

文章浏览阅读1k次。先暂时记录一下首先 Chrom浏览器一定要匹配好, 不能在百度搜索中下载最新的谷歌浏览器,我现在下的是版本50的浏览器。匹配的chromedriver.exe 是2.9的。32位的同样也使用64位的。 需要把chromedriver.exe 安装在谷歌浏览器的安装目录下,路径是:C:\Program Files (x86)\Google\Chrome\Application与chrome.ex_京东爬虫 对浏览器的要求

推荐文章

热门文章

相关标签