1.border-image
1.设置在元素围绕的border的图片,用图片代替边框
语法:
broder-image-source:图片
border-image-slice:切下的区域,数字|百分比(相对于图像的高度和宽度)
border-image-width:在round情况下设置repeat图片的宽度
border-image-repeat:stretch|round|repeat|space
border-image-outset:
border-image有三个要求
1.使用在border上,元素上必须有border属性
2.切下图片像素slice
3.定义中间的区域是重复拉伸还是直接拉伸
简写:
border-image:url("source") 30 round;
简写只能写图片地址,slice区域,和repeat方式,border-image-width须单独写,否则无法显示 JavaScript syntax: object.style.borderImageSlice="30%"
浏览器支持
原图片
1.stretch拉伸,slice是30,根据单个小方块来计算
2.round重复小方块平铺,slice是30,根据单个小方块来计算
3.repeat重复平铺,slice是30,根据单个小方块来计算
4.slice值是百分比,相对于图像的高度和宽度
5.border-image-width:在round情况下设置repeat图片的宽度
1.border-image的更多相关文章
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- css样式之border
border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...
- 通过CSS的border绘制三角形
通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- border:none 和border:0区别差异
border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...
- WPF 通过Border来画边框
WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- 使用border做三角形
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...
- iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
随机推荐
- Phalcon的MVC框架解析
1. mvc/simple从最简单的入手吧. 把一些能及时说明白的东西写在注释里了,需要扩展的知识列在下面. public/index.php <?php $loader = new \Phal ...
- lvm 新建一个vg 逻辑卷 配置启动
fdisk /dev/sdb 格式 t 8e w vgcreate datavg /dev/sdb1lvcreate -L 999G -n lvdata datavgmkfs.xfs /dev/da ...
- Linq中的ToList()和CopyToDataTable()
最近在项目中使用了Linq,想把Linq的查询结果直接转换成DataTable对象,通过查找发现Linq有一个CopyToDataTable<T>的泛型方法,该方法只能在T是DataRow ...
- Hibernate- 连接查询
01.搭建开发环境 02.连接查询 package com.gordon.test; import java.util.Arrays; import java.util.List; import or ...
- 命令行启动kettle
kettle命令启动: http://download.csdn.net/detail/ludaxin6/9519418 kettle命令启动参数: http://blog.csdn.net/glei ...
- [从jQuery看JavaScript]-注释(comments)
jQuery片段: /*! * jQuery JavaScript Library v1.3.2 * http://jquery.com/ * * Copyright (c) 2009 John Re ...
- [oracle] 重要服务启动与停止命令行
① 控制台服务[em control] 启动:emctl start dbconsole 停止:emctl stop dbconsole ② 监听器服务[listener control] 启动:ls ...
- Java运行时,各种类型存储介绍
Java的内存分配 Java程序运行时的内存结构分成:方法区.栈内存.堆内存.本地方法栈几种. 方法区 存放装载的类数据信息,包括:基本信息:每个类的全限定名.每个类的直接超类的全限定 ...
- linux -- ubuntu 14.10开机出现错误“Error found when loading /root/.profile”解决
修改完root权限自动登录后,发现开机出现以下提示: Error found when loading /root/.profile stdin:is not a tty ………… 解决方法:在终端中 ...
- Python脚本完美解决Linux环境解压.zip文件乱码问题
1.vi uzip(文件名)2.复制以下Python程序 #!/usr/bin/env python # -*- coding: utf-8 -*- # uzip.py import os impor ...