CSS3 implementation transparent Border method Instance Tutorial

Today's web pages, often encounter the effect of the pop-up layer. Similar screenshots are as follows

is a translucent border. Khan, front-end colleagues think of the solution is to do a 10*10 png24 translucent picture, and then as a background tile (so that the outer box of the inner margin = the width of the pop-up layer border) so as to simulate the effect of transparent borders. But the evil IE6 does not support PNG transparency .... Crazy!

Find a better solution today, using RGBA.

First said RGB, RGB color mode (also translated as "red, green and blue", less use) is the industry's color standard, through the Red (R), Green (G), Blue (B) three color channel changes and their superposition to get a variety of colors, RGB is the representative of red, green, The blue three-channel color, which covers almost all the colors that human vision can perceive, is one of the most widely used color systems.

RGBA has more parameters to control alpha transparency based on RGB. Above R, G, b three parameters, positive integer value of the range of values: 0? 255. The value of the percentage value range is: 0%? 100%. Values that are out of range will be limited to their closest values. Not all browsers support the use of percent values. A parameter, value is between 0~1, not negative

RGBA Syntax:

. div {Background:rgba (0,0,0,0.5);}

The difference between RGBA and opacity

Opacity (Filter:alpha (opacity=50) or opacity:0.5) makes the entire element transparent to the child element, and Rgba is only transparent to the element itself, and the child element is opaque.

Here's how to make IE browser support RGBA color.

The Rgba of IE

. div {
filter:progid:dximagetransform.microsoft.gradient
(startcolorstr= "#66000000", endcolorstr= "#   66000000 ", gradienttype=0);}
/*IE9 has supported the RGBA mode. *
/: Root Div{filter:none}

The STARTCOLORSTR parameter value in the DXImageTransform.Microsoft.gradient filter is #aarrggbb form, where the AA (the first two bits of the STARTCOLORSTR) is hexadecimal representing the opacity, 00 means completely transparent, FF is all opaque, into the range of decimal is 0~255, the remaining rrggbb is the color of the hexadecimal code. Examples of Background:rgba (125, 0, 0,. 3) indicate a red background of 30% opacity. How to convert 30% of the opacity into a 16 system? Very simple, first calculate the #aa decimal x,x/255 = 3/10, the solution X=3*255/10, and then convert X to 16, approximately equal to 4 B.

Rgba color can also be used for border, however, different browsers for border Rgba support is not the same, but the only difference is that Firefox at the corner of the border will appear superimposed, For example, the transparency is 0.4, then in Firefox, Four corners of the transparency will become 0.8, and support RGBA non-FF browser does not occur.



CSS3 Background-clip to make a semitransparent border


The HTML code for the pop-up box is as follows:

<div class= "Search-popup-window advise" id= "Lightbox" >

</div>

The CSS code for the pop-up box is as follows:

     #lightbox  {             position: absolute; top: 0px;left: 0px;            display:none;            width: 470px;  height: 350px;           background-color:  white;           text-align: center;            padding:8px;                                /*  Key Code Section  */           -moz-background-clip:  padding;     /* Firefox 3.6 */            -webkit-background-clip: padding;  /* safari 4? chrome 6? */            background-clip: padding-box;       /* firefox 4, safari 5, opera 10, ie 9 */                      border: 8px solid rgba (0,0,0,0.3);                                    -webkit-border-radius: 15px;            -moz-border-radius: 15px;            border-radius: 15px;                            } 

<span style= "Background-color:rgb (255, 255, 255); line-height:33.99305725097656px; Font-family:arial, Helvetica, Sans-serif; " > </span>

The script part is not the focus of this tutorial, the Ming River will not be posted. The CSS part of the code looks a lot, the key is the following lines of code inside:

     #lightbox  {                            /*  Key Code Section  */            -moz-background-clip: padding;      /* Firefox 3.6 */            -webkit-background-clip: padding;  /* safari 4? chrome 6? */            background-clip: padding-box;       /* Firefox 4, Safari 5, Opera 10, IE 9 */                      Border: 8px solid rgba (0,0,0,0.3);                           } 

Why is it possible to use background-clip to produce translucent border effects? Next Ming River to say background-clip.

An application of Background-clip and Background-origin

Background-clip and Background-origin are the newly added background module properties in CSS3 to determine the location of the background.

Background-clip is used to determine whether background contains border regions. The Background-origin is used to determine the reference position of the background-position calculation.

The syntax is:

Background-clip: [Border | padding] [, [Border | padding]]*
Background-origin: [Border | padding | content] [, border | padding | content]]*

For Background-clip:

If it is a padding value, the background ignores the padding edge, and the border is transparent. If the value is border, the background includes the border area. If there are multiple background-image pictures, the corresponding background-clip values are separated by commas.

For Background-origin:

If it is a padding value, the position is relative to the padding edge ("0 0″ is the upper-left corner of the padding edge, and" 100% 100% "is the lower-right corner). If it is a border value, it means a relative border edge. The border value is relative to the content edge. As with Background-clip, multiple values are separated by commas. If the background-clip is a padding value, Background-origin is the border value, and the Background-position is "top left" (the default initial value), the upper left-hand corner of the background image will be truncated.

These two properties appear only from CSS3, and what about default performance in background module without using this property?

Background-clip default is similar to Background-clip:border.

Background-origin default is similar to Background-origin:padding.

But IE is also a special case (It sucks).

In IE6 and IE7, the background of general elements (except button) is equivalent to: background-clip:border; Background-origin:border;

The Haslayout elements (plus button, etc.) are the same background: background-clip:padding; background-origin:padding;

This pair of CSS3 properties has been implemented in browsers such as Mozilla, Safari 3, and Konqueror, but they are all expressed through their private properties.

The private properties of a basic non-IE browser generally start with-xxx-,-o-is the Presto engine of Opera private,-icab-is icab private,-khtml-is khtml engine browser (such as Konqueror Safar i),-moz-, are browsers that use Mozilla's Gecko engine (such as Firefox,mozilla),-webkit-are browsers (such as Safari, Swift) that webkit the rendering engine (which is the khtml derivative).

That is, the supported private properties are:

-moz-background-clip
-webkit-background-clip
-khtml-background-clip
-moz-background-origin
-webkit-background-origin
-khtml-background-origin

Here's a simple example of using the Background-origin attribute, the effect is as follows:

HTML section:

<button> Here's the button, it's not the girl </button>

CSS section (see Note in detail):

button {        display:inline-block;/* Trigger haslayout*/  
      height:26px;
        padding:0 20px;
        cursor:pointer;         *overflow:visible;/* eliminates IE button padding with word length change bug*/         border:3px double  #95071b/* Use 3px  bilateral to simulate the white line in the design drawing * *   
      border-right-color: #650513;
        border-bottom-color: #650513;
        background-color: #95071b;         /* setting background trimming and Reference line * *        
 -moz-background-clip:padding;
        -webkit-background-clip:padding;         -khtml-background-clip:padding;
        -moz-background-origin:padding;
        -webkit-background-origin:padding;
        -khtml-background-origin:padding;         /* Forward compatible * *         
background-clip:padding;
        background-origin:padding;
        color: #fff;
        font-size:12px;
        line-height:20px;         /* correction IE6 under height problem * *         
_padding-top:2px;
        _line-height:14px; }

Deficiency: This effect can not be realized under Opera.

Of course, this is just a neat solution to the HTML code (limited to learning and understanding of Background-clip and Background-origin attributes), and, of course, try other methods, perhaps to make CSS more concise, as well as the pros and cons of the various methods to measure themselves.

Background-clip is used to set the background display mode, a total of border, padding, content three modes to control the scope of the background coverage container, and the default display mode is border (not all default display modes are border, IE under a special case, you can see the article Yiwen fly, that is, the background cover can not exceed the border (there is covered to the border), and when the demo set its value to padding, that is, the background can only cover the inside box, the border is not a background!

Because the demo will background-clip set to padding, the background color (white) does not exist in the border, when your border is with the Transparency settings (demo is 0.3), you can produce this translucent border effect! Note that the settings of different browsers are some differences, and IE is not supported! This is the only drawback to this scheme.

Background-clip closely related to a background-origin attribute, Background-origin's usage is left to be explained later.