前端web的点9图效果实现

html-css026

前端web的点9图效果实现,第1张

这里只是一个怕自己忘记写的一个笔记，不是很全很详细，建议还是看 官方教程

图片原始像素是348 x 220

我的需求是拉伸image可以自适应内容长度，但是拉伸不能导致两边的半圆被拉成椭圆

border-image可以使用图片作为border(标准说法：border-image CSS属性允许在元素的边框上绘制图像), 给出图片后可以通过相应的参数来调整图片的拉伸，这样就可以像点9图那样保留部分内容不变的情况下，拉伸可拉伸部分来自适应。

我主要解释一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,

这里0 170 0 170就是划分了原始图片内容,称之为border-image-slice

后面的 1px 170px 指的是border-image-width ，字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格，这里指的就是作为实际容器的那个节点的显示范围了，我也设置为170， stretch作为border-image-repeat说明图片在超过原始长度后使用拉伸的方式

这里有更易读，更详细的文章 border-image的正解用法

点九图编辑器

https://developer.mozilla.org/zh-CN/docs/web/css/css_backgrounds_and_borders/border-image_generator (这个加载不出预览图)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator （这个可以加载出预览图）

是CSS3 blur滤镜实现的效果

1，测试代码

.blur {    

    -webkit-filter: blur(10px) /* Chrome, Opera */

       -moz-filter: blur(10px)

        -ms-filter: blur(10px)    

            filter: blur(10px)    

}

2，相关HTML代码

<img src="mm1.jpg" />

<img src="mm1.jpg" class="blur" />

3 , 也可以通过SVG滤镜实现

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "

<svg version="1.1" 

     xmlns="

     xmlns:xlink="

     xmlns:ev="

     baseProfile="full">  

    <defs>

        <filter id="blur">

            <feGaussianBlur stdDeviation="10" />

        </filter>

    </defs>

</svg>

上面代码红色高亮的就是添加的滤镜代码（其他代码Dreamweaver自动生成，其实，只要一行就够了~）。

CSS调用代码

filter: url(blur.svg#blur) /* FireFox, Chrome, Opera */

完整的css代码

.blur {    

02        filter: url(blur.svg#blur) /* FireFox, Chrome, Opera */    

03             

04        -webkit-filter: blur(10px) /* Chrome, Opera */    

05           -moz-filter: blur(10px)    

06            -ms-filter: blur(10px)       

07                filter: blur(10px)    

08             

09        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false) /* IE6~IE9 */    

10    }