【css3 border-image及连续的图像边框】的更多相关文章

CSS揭秘之多重边框&连续的图像边框

1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径)来完成一个多重边框的制作,肯定大家都已经非常熟悉box-shadow了,不过我还是来复习一下.(1) box-shadow:none | <shadow>#where<shadow>= [inset? && [ <offset-x><offset-y&…

css3 border-image及连续的图像边框

border-image 它是下面几个值的简写: border-image-source // 使用绝对或相对地址url,引入图片 border-image-slice   //切割图片,取值支持:<number> 或<percentage>其中number是没有单位的, border-image-width //边框图片的宽度 border-image-outset //边框向外延伸的距离 border-image-repeat //边框如何重复取值有: stretch | re…

css实现连续的图像边框

有时我们想把一个图片应用为边框,而不是背景,最简单的办法是使用两个HTML元素,一个元素用来把我们的石雕图片设置为背景,另一个元素用来存放内容,并设置纯白背景,然后覆盖在前者之上,这个方法需要一个额外的HTML元素,这显然不够理想,他不仅把结构和表现混合起来,而且在某些特定的场景下,修改HTML是做不到的,那么如果只用一个元素,如何达到这种效果呢? 思路: 在背景图片上面再叠加一层纯白的实色背景,为了让下层的图片透过边框显示出来,我们需要给两层背景指定不同的background-clip值.最后…

css3学习总结3--CSS3图像边框

border-image属性 .className{ border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px; -webkit-border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px; -moz-border-image:url(/course/54d1cae088dba…

css3 border img 边框图片

摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘要 其实我[border-image属性]是用来给元素边框添加背景图像,在某些时候,利用这个 border-image可以轻松绘制一些比较复杂的小部件.并且我是 border-image-source border-image-slice border-image-widthborder-image…

css3: background-image使用多个背景图像

CSS3 允许元素使用多个背景图像. background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bgmore{…

CSS3利用一个div实现内圆角边框效果

*首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; h…

CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）

1.hsla或rgba实现半透明边框. rgba在rgb的基础上增加了透明通道,就不详细说了,下面重点说下hsla: 说明: HSLA(H,S,L,A) 取值: H:Hue(色调).0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色.取值为:0 - 360 S:Saturation(饱和度).取值为:0.0% - 100.0% L:Lightness(亮度).取值为:0.0% - 100.0% A:Alpha透明度.取值0~1之间. 两种方式实现透明边框的代码如下:…

css3 使用SVG做0.5px 的边框细线

.HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>"); height: 1px; width: 100%; }…

CSS3 border属性的妙用

.ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top: -4px; left: -11px; font-size: 14px; color: #fff; text-align: center; font-style: normal; z-index: 1; &:after{ content: ""; position: absolu…