皮皮网

用CSS实现渐变边框，实现过程很简单最终效果却很赞

       在众多网页设计中，CSS无疑扮演着至关重要的角色。然而，受限于开发技术和周期，我们常常依赖现成的UI框架，导致网页风格大同小异。今天，我将向大家介绍如何运用CSS打造一个渐变边框的盒子。

       展示效果如下：

       这样的效果令人眼前一亮，但背后的CSS代码却十分简洁，其中伪元素的运用至关重要。

       以下是完整的源代码，我在关键位置添加了注释：

       关于样式复用

       考虑到渐变边框的CSS样式具有很高的复用性，我们可以通过SASS将其提取为通用的mixin。只需预先定义一些类，并在需要添加渐变边框的盒子中应用这些类即可。

       最终效果：

       通常，酷炫的效果在门外汉看来可能很复杂，但实际上实现原理非常简单。有些看似复杂的东西，其实实现起来很简单。我平时喜欢积累一些实用技巧。

       参考视频：Creative CSS Gradient Border Cards | How to Create CSS Gradient Border

谁有flash展示酷炫一点的源码

       import mx.utils.Delegate;

       import flash.display.BitmapData;

       var numOfItems:Number;

       var radiusX:Number = ;

       var radiusY:Number = ;

       var centerX:Number = Stage.width/2;

       var centerY:Number = Stage.height/2;

       var speed:Number = 0.;

       var perspective:Number = ;

       var home:MovieClip = this;

       var tooltip:MovieClip = this.attachMovie("tooltip", "tooltip", );

       tooltip._alpha = 0;

       var tool_txt_ary:Array = new Array();

       tool_txt_ary[0] = ".2寸笔记本";

       tool_txt_ary[1] = ".6寸笔记本";

       tool_txt_ary[2] = "金刚系列";

       tool_txt_ary[3] = "靓酷系列";

       tool_txt_ary[4] = "全能王系列";

       tool_txt_ary[5] = "网吧电脑系列";

       tool_txt_ary[6] = "雅典系列";

       var numOfItems:Number = 7;

       for (var i = 0; i<numOfItems; i++) {

        var imageBmp:BitmapData = BitmapData.loadBitmap("icon"+i+".png");

        var t = home.attachMovie("item", "item"+i, i+1);

        t.angle = i*((Math.PI*2)/numOfItems);

        t.onEnterFrame = mover;

        t.toolText = _root.tool_txt_ary[i];

        t.icon.inner.attachBitmap(imageBmp,1);

        t.r.inner.attachBitmap(imageBmp,1);

        t.icon.onRollOver = over;

        t.icon.onRollOut = out;

        t.icon.onRelease = released;

       }

       function over() {

        home.tooltip.tipText.text = this._parent.toolText;

        home.tooltip._x = this._parent._x;

        home.tooltip._y = this._parent._y-this._parent._height/2;

        home.tooltip.onEnterFrame = Delegate.create(this, moveTip);

        home.tooltip._alpha = ;

        home.tooltip.tipText._visible = true;

       }

       function out() {

        delete home.tooltip.onEnterFrame;

        home.tooltip._alpha = 0;

        home.tooltip.tipText._visible = false;

       }

       var moved = true;

       function released() {

        moved = false;

        speed = 0;

        this.onEnterFrame = function() {

        if (home._y>-) {

        home._y -= 2;

        home.bg_map._y+=2;

        } else {

        _root.attachMovie("messageBox","messageBox",this.getNextHighestDepth(),{ _x:0, _y:});

        messageBox.click_btn.onPress = function() {

        this._parent.black.onEnterFrame = function() {

        if (home._y<0) {

        home._y += 2;

        home.bg_map._y-=2;

        } else {

        home._y = 0;

        moved = true;

        this._parent.removeMovieClip();

        }

        };

        };

        messageBox.messages.tipText.text="";

        messageBox.menu1.screch_txt.text="";

        messageBox.messages.tipText.text = this._parent.toolText;

        messageBox.menu1.screch_txt.text = "金翔云-<"+this._parent.toolText+">";

        delete this.onEnterFrame;

        }

        };

       }

       function moveTip() {

        home.tooltip._x = this._parent._x;

        home.tooltip._y = this._parent._y-this._parent._height/2;

       }

       function mover() {

        this._x = Math.cos(this.angle)*radiusX+centerX;

        this._y = Math.sin(this.angle)*radiusY+centerY;

        var s = (this._y-perspective)/(centerY+radiusY-perspective);

        this._xscale = this._yscale=s*;

        this.angle += this._parent.speed;

        this.swapDepths(Math.round(this._xscale)+);

       }

       this.onMouseMove = function() {

        if (moved) {

        speed = (this._xmouse-centerX)/;

        }

       };