【css】border-image

1. border-image

一个新css3 样式

给边框增加图片，还可以拉升或重复图片 round 为重复 sketch 为拉升

border: 15px solid transparent;
-webkit-border-image: url(../img/notice-bg.png)30 30 round;
-o-border-image: url(../img/notice-bg.png)30 30 round;
border-image: url(../img/notice-bg.png)30 30 round;

2. 参考资料

http://www.w3school.com.cn/cssref/pr_border-image.asp

3. 其他border css3 样式

border-radius 圆角
box-shadow 阴影
border-image 边框图片

时间： 2024-11-04 23:29:47

【css】border-image的相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化

Bootstrap确实是一个好的前端框架,但是这东西就是任性,只支持IE8以上的浏览器, 国外还有一些其他不错的框架,但是连WIN7默认的浏览器IE8都不支持,那留你何用,甚至Bootstrap这一优秀的框架在其V4版本也矫情起来了,开始不支持IE8, 把我大天朝的IE6放哪里去? 扁平化总是给人高大上的样子,好像必须用前端框架实现不可,自己写前来根本无从下手, 其实根本不是, 都是CSS样式,有什么不可能实现呢? 好,光吹没用,跟大家看些实际的东西. 一.按钮按钮在网页中常见得不能再常见,那

【CSS】对于超出div部分的处理

一个正常的前端攻城狮,一般情况不会把内容布置到div外面,但是如果这部分的内容,是用户输入的,然后是从数据库中取出来的,那样有内容超出div部分也是很正常的,尤其是这部分内容,是用户通过编辑器编辑的,便有可能出现这样的情况: 比如,限制一个宽350px,高100px的表格,用户用编辑器设置了一个400px x 400px的表格,就会溢出. <div style="border:2px solid #000000; width:350px; height:100px;"> &

【CSS】关于position:absolute布局

在网页中,如果需要left与top属性生效,就必须为这个div的style属性加入position:absolute,这样,此div才能游离于整体的div布局之外,也就是说,你没有加position:absolute之前,所有的div遵循我在<[CSS]关于div的对齐与网页布局>(点击打开链接)所提到的,各种各样布局. 例如下面的代码: <div style="position:absolute; left:100px; top:100px; width:20px; heig

【css】ie6下使用css sprit 滤镜做透明图片

.service{ /*position:relative;*/ height:96% !important;overflow: hidden;} .pright{ height:40px; text-align:right; margin-top:30px; padding-right:50px; overflow:hidden; } .pright .btn_order{ background:url('../images/order_icon02.png') 0 0 no-repeat;

【css】jquery.pngFix.js解决透明问题

/** * -------------------------------------------------------------------- * jQuery-Plugin "pngFix" * Version: 1.2, 09.03.2009 * by Andreas Eberhard, [email protected] * http://jquery.andreaseberhard.de/ * * Copyright (c) 2007 Andreas Eberhard *

【css】超级链接点击后出现虚框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【CSS】CSS特效集锦，视觉魔法的碰撞与融合（一）

原文:[CSS]CSS特效集锦,视觉魔法的碰撞与融合(一) 目录前言一.浮光掠影二.发光球体三.圆环进度条四.三角形五.有色到透明的渐变六.模糊效果和毛玻璃效果七.斜角标签技术总结知乎主页和专栏正文回到顶部前言在本文中我讲述了7种CSS的特效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方式达到效果. 回到顶部一.浮光掠影首先我们看第一个实现效果:在鼠

【CSS】怎么解决浏览器兼容性问题

[CSS]怎么解决浏览器兼容性问题工具/原料 Dreamweaver CSS 方法/步骤不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于此,所有标记的内外边距被统一起来. 优先级问题: 对于同一标记属性所给定的值,有不同的优先级.其中优先级最高的是内联代码,其实是页内CSS,接下来是浏览器默认设置,最后才是外部CSS所做的限制. Margin不一致的问题

【css】float:left不撑满容器与opacity将子元素透明demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h