CSS3的border-image
border-image:none|image-url|number|percentage|stretch,repeat,round
参数:
none:默认,无背景图片
url:地址,可以为绝对,也可以相对
number:切割背景图片的边框大小一共可以有1-4个值,上,右,下,左
percentage:功能同number,只是它用的是百分比,number为数字(不用写单位,单位为px)
stretch:拉伸
round:平铺
repeat:重复边框背景
1、边框背景图切割时,处于四个角的地方不动,平铺,拉伸,重复只针对四边,不包括四角。
【原始边框背景图】
.border-img{
width: 200px;
border: 20px solid;
-webkit-border-image: url("picture/12.png") 95 100 85 105 stretch;
border-image: url("picture/12.png") 95 100 85 105 stretch;
}
<div class="border-img">border-img</div>

CSS3的border-image的更多相关文章
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- css3实现border渐变色
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3图形绘制
以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- 总结html
1.初识html W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定 ...
- 你务必知道的css简写
欢迎加入前端交流群来py:749539640 简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...
- CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
随机推荐
- 2019最好用的自动化测试工具Top 10,果断收藏!
经常有人在公众号留言或是后台问我,做自动化测试用哪个工具好,或是学哪门编程语言好呢? 这个时候总是无奈的说: 你应该学习Python 或是Java. 你应该掌握Selenium. 又或者你需要学会jm ...
- time库的使用
首先只需要 import time (典型的,标准的python库的使用方法) 主要包括三类函数 ——时间获取:time() , ctime() , gmtime() ——时间格式化: strftim ...
- 用css固定textarea文本域大小尺寸
textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候 我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动text ...
- Mass Change Queries Codeforces - 911G
https://codeforces.com/contest/911/problem/G 没想到线段树合并还能这么搞.. 对每个权值建一个线段树(动态开点),如果权值为k的线段树上第i位为1,那么表示 ...
- linux系统下安装PHP扩展pcntl
1.查看当前的PHP版本并下载一个同样版本的php(我的是php5.6.22,我下的是php5.6.22) wget http://hk1.php.net/get/php-5.5.10.tar.gz ...
- centos安装openldap过程
1.下载软件如下,db是数据库 2.首先安装数据库db # tar xf db-4.8.30.tar.gz # cd db-4.8.30 # cd build_unix/ (# ../dist/con ...
- 8593 最大覆盖问题 two pointer
8593 最大覆盖问题 时间限制:50MS 内存限制:1000K提交次数:193 通过次数:88 题型: 编程题 语言: G++;GCC;VC Description 输入格式 第1行是正整数n ...
- 配置Gradle构建
构建基础配置 Android Studio包含一个顶级的构建文件和每个模块的构建文件.构建文件被称为 build.gradle,它是一个纯文本文件,它使用Groovy语法来配置由Android Gra ...
- vue 引用其他组件
1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...
- 利用樹霉派採集溫濕度上傳到OneNET(非完整,僅參考)
看圖: Python代碼: #env /usr/bin/python3 #author Bruce import RPi.GPIO as GPIO import time import json im ...