Example of CSS translucent border implementation

CSS Translucent Border implementation examples (figure)

1. Translucent border

Problem:

If we want to set a red background and a black translucent border for a container, we might write:

border:20px solid Rgba (0,0,0,0.5); background:red;

But the effect is this (figure 1-1.png); how can our translucent colors not implement a translucent border?

Figure 1-1.png

Solution:

We can use the Background-clip property to adjust the default behavior above, set it as the value of Padding-box, and then we have the desired effect (figure 1-2.png);

border:20px solid Rgba (0,0,0,0.5); background:red;background-clip:padding-box;

Figure 1-2.png

2.background-clip

Now that we've used the Background-clip attribute, let's take a look at this property.

Background-clip:

Sets whether the background (background picture or color) of an element extends below the border.

value (values)	Description
Border-box	Default initial value , the background extends to the edge of the border (but below the border)
Padding-box	There is no background under the border, i.e. the background extends to the outer edge of the inner margin
Content-box	Background clipping to the edge of the content area (Content-box)
Text	Experiment API with background clipping into foreground text (foreground text).

Example

CSS Content

span {   border:10px blue;   Border-style:dotted Double;   Margin:1em;   Padding:2em;   Background: #F8D575;}. Border-box {background-clip:border-box;}. Padding-box {background-clip:padding-box;}. Content-box {background-clip:content-box;}. text {Background-clip:text;}

HTML Content

<span class= "Border-box" >border-box</span><span class= "Padding-box" >padding-box</span> <span class= "Content-box" >content-box</span><span class= "text" >text</span>

Effect: (Figure 2-1.png)

Figure 2-1.png

3.border-style

4.border-image

Initial value:

• Border-image-source:none

• border-image-slice:100%

• Border-image-width:1

• border-image-outset:0s

• Border-image-repeat:stretch

4.1 Border-image-source:none | <image>

where

<image> = <url> | <image () > | <image-set () > | <element () > | <cross-fade () > | <gradient>

where

<image () > = Image ([[<image> | <string>]?, <color>?]!)
<image-set () > = Image-set (<image-set-option>#)
<element () > = Element (<id-selecter>)
<cross-fade () > = Cross-fade (<cf-mixing-image>,<cf-final-image>?)
<gradient> = <linear-gradient () > | <repeating-linear-gradient () > | <radial-gradient () > | <repeating-radial-gradient () >

Gradient Example:

<linear-gradient () > = linear-gradient ([<angle> | to <side-or-corner>], <color-stop-list>)

CSS Content

. gradient {     border:30px solid;    Border-image-source:linear-gradient (to right, red, green, blue);    /*border-image-source:linear-gradient (90deg, red, green, blue); */    border-image-slice:10;    padding:20px;}

HTML Content

<p class= "Gradient" >the image is stretched to fill the area.</p>

Effect: (Figure 4-1.png)

Figure 4-1.png

4.2 border-image-slice: [<number> | <percentage>]{1,4}&& fill?

This Border-imge-slice property passed in 1~4 parameters (number no unit specifically refers to pixels or percent values) to divide the picture into 9 parts, 1,2,3,4 Four blocks are not stretched, not tiled, called blind, 5,6,7,8 four blocks can be Border-image-repeat to control damper and repetition (stretch: default, stretch; Repeat: tiled; Round: The whole number of tiles; ), the 9th block does not display, the incoming parameter fill displays the 9th block, the segmentation situation such as (Figure 4-2.png && figure 2-3.png):

Figure 4-2.png

Figure 4-3.png

We use the above image (81PX^81PX) to see how the different number of parameters are divided into the image;

1 parameters

/* Border-image-slice:slice */border-image-slice:27; border:30px solid Transparent;padding:20px;border-image-source:url ([https://mdn.mozillademos.org/files/4127/ Border.png] (https://mdn.mozillademos.org/files/4127/border.png));

Figure 4-4.png

Figure 4-5.png ()

2 parameters (see figure 4-3.png)

/* border-image-slice:vertical horizontal */border-image-slice:40 40.5; border:30px solid Transparent;padding:20px;border-image-source:url ([https://mdn.mozillademos.org/files/4127/ Border.png] (https://mdn.mozillademos.org/files/4127/border.png));

Figure 4-6.png

Figure 4-7.png ()

3 parameters

/* Border-image-slice:top Horizontal bottom */border-image-slice:27 40 27; border:30px solid Transparent;padding:20px;border-image-source:url ([https://mdn.mozillademos.org/files/4127/ Border.png] (https://mdn.mozillademos.org/files/4127/border.png));

Figure 4-8.png ()

4 parameters (see figure 4-2.png)

/* Border-image-slice:top Right bottom left */border-image-slice:27 27;border:30px solid transparent;padding:20p X;border-image-source:url ([Https://mdn.mozillademos.org/files/4127/border.png] (https://mdn.mozillademos.org/ Files/4127/border.png));

Figure 4-9.png ()

4.3 border-image-width: [<length> | <percentage> | <number> | Auto]{1,4}

Grammar:

Border-image-width:all/                        * one-value syntax */       e.g. border-image-width:3;border-image-width:vertical Horizontal/        * two-value syntax */  e.g. Border-image-width:2em 3em;border-image-width:top horizontal Bottom /      * Three-value syntax *    / e.g. border-image-width:5% 15% 10%;border-image-width:top Right bottom left/      * four-value syntax */  e.g. border- image-width:5% 2em 10% Auto;

Set the width of the border picture, if beyond the set of Border-width, will expand inward; see the example below, compare (Figure 4-10.png && figure 4-11.png);

Example:

border:30px Solid Transparent;padding:20px;border-image-source:url ("https://mdn.mozillademos.org/files/4127/ Border.png "); border-image-slice:27;

Figure 4-10.png

border:30px solid Transparent;padding:20px;border-image-source:url ([https://mdn.mozillademos.org/files/4127/ Border.png] (https://mdn.mozillademos.org/files/4127/border.png)); Border-image-slice:27;border-image-width:1 2 1 1 ;

Figure 4-11.png

4.4 border-image-outset: [<length> | <number>]{1,4}

Grammar:

/* Border-image-outset:sides */border-image-outset:30%;/* border-image-outset:vertical Horizontal */ border-image-outset:10% 30%;/* border-image-outset:top Horizontal bottom */border-image-outset:30px 30% 45px;/* border -image-outset:top Right bottom left  */border-image-outset:7px 12px 14px 5px;

The effect is to extend the border picture outside the box to see the example of devolution, compare (Figure 4-12.png && figure 4-13.png);

Example:

border:30px solid Transparent; padding:20px; Border-image-source:url ([Https://mdn.mozillademos.org/files/4127/border.png] (https://mdn.mozillademos.org/ Files/4127/border.png)); border-image-slice:27; margin:60px;

Figure 4-12.png

border:30px solid Transparent;padding:20px;border-image-source:url ([https://mdn.mozillademos.org/files/4127/ Border.png] (https://mdn.mozillademos.org/files/4127/border.png)); border-image-slice:27;margin:60px; Border-image-outset:2 1 1 1;

Figure 4-13.png

4.4 border-image-repeat: [Stretch | repeat | round]{1,2}

values (value)	Description
Stretch	Default initial value , extrude
Repeat	Tile
Round	Tile whole number of times

Grammar:

Border-image-repeat:type                      /* one-value syntax *       /e.g. Border-image-value:stretch;border-image-repeat: Horizontal Vertical/       * two-value syntax */       e.g. Border-image-width:round space;