Shulou(Shulou.com)06/03 Report--

This article is about how HTML+CSS achieves text effects, gradient effects, and border picture effects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Text Shadow

Text clipping

Text Stroke

Text filling

Linear gradient

Radial gradient

Border picture effect:

I. attribute interpretation

CSS3 provides a new set of properties that can be embedded in a frame in the form of an image. In this way, the border can be customized.

1.border-image-source / / introduce the background image address

2.border-image-slice / / introduce background image by cutting

The width of the 3.border-image-width / / border picture

The arrangement of 4.border-image-repeat / / frame background pictures

5.border-image-outset / / Border background expands outward

6.border-image / / shorthand for the above five attributes

Two. attribute interpretation

To achieve the frame background, we also have certain requirements for the picture, otherwise the effect can not be fully reflected. The picture can be understood through the segmentation of the ninth grid. Let's use the teaching pictures on the W3C official website to explain.

As shown in the picture above, the ninth palace grid does not necessarily require that every grid be the same size. Of course, if it is the same, it is relatively easy to make a border background. For example, the following picture:

First of all, use the Photoshop software to analyze the overall size of the standard Nine Palace grid and the size of each grid. Finally, it is concluded that the total size of the picture is 81px square, the four corners are 27px squares, and the other five corners are also 27px.

So, the first step: first create a box area with a rectangle the size of 400x400. Then set up the incoming border diagram

Like.

/ / introduce frame image

Border-image-source: url (border.png)

With this sentence alone, the browser under the webkit engine will see a tiny shadow of the image in the four corners of the box block. Other browsers can't see anything. This is due to the fact that the width of the border background image is not set.

/ / set the width of the border image, top right, bottom left, you can set four values border-image-width: 81px

The width of the border image is set here, not the border width. When you set the border width, you will find that the text will shift. The width of the border image does not squeeze the text.

/ / set the width of the border border-width: 20px

After the above settings are completed, browsers that support frame background images will spread the image in the four corners. At this time, it is necessary to configure the display of the background image by introducing the cutting attribute.

/ / first, the width of the frame image is set to 27px, which is the same as the width and height of a single frame.

Border-image-width: 27px

/ / set the size of the cutting attribute border-image-slice: 27

The 27 here does not need to set px pixels because it is the pixel by default. After setting 27, we will find that the four corners of the border are exactly the four orange corners. Then you can gradually enlarge or gradually put down this value to experience its change.

/ / gradually zoom in from 27 to 81, and all four corners slowly zoom out, each showing a complete image border-image-slice: 81

/ / gradually zoom out from 27 to 0, and find that all four corners are gradually getting larger, together with fill to display a complete image as a whole.

Border-image-slice: 0 fill

The above only sets a single pixel to represent the size of the four edge cuts, and you can also set the percentage, floating point, or other four variable sizes.

/ / 33.5% almost 27

Border-image-slice: 33.5%

/ / set 27 up and down, 0 around

Border-image-slice: 27 0

If you want the border background to expand outward, you can set the expansion setting.

/ / outbound expansion 20px, which can also be a floating-point value, such as 2.2 border-image-outset: 20px

After the four corners are set, we need to set the four variable display arrangements. Use border-image-repeat

Property, there are four values for use, as shown in the following table:

/ / fill by stretching. Of course, you can border-image-repeat: stretch by setting four edges on the top, bottom, right and left.

/ / Tile filling. If it exceeds this, border-image-repeat: repeat will be truncated.

/ / Tile filling, and dynamically resize the image until it is full of border-image-repeat: round

/ / Tile filling, and dynamically adjust the spacing of the images until they are covered with border-image-repeat: space

/ / A small example of another button, div {

Width: 400px; height: 40px

Border-image-source: url (button.png); border-image-width: 10px

Border-image-slice: 10 fill; border-image-repeat: stretch

}

III. Abbreviations and versions

/ / the abbreviated format of border-image is very simple, as follows:

Border-image: | | [/

| /? /] | |

/ / the above is excerpted from the manual and converted into the actual format as follows: border-image: url (border.png) 27/27px round

The supported browsers and versions are shown in the following table:

/ / compatible with prefix

-webkit-border-image: url (border.png) 27/27px round

-moz-border-image: url (border.png) 27/27px round

-o-border-image: url (border.png) 27/27px round; border-image: url (border.png) 27/27px round

Thank you for reading! On "HTML+CSS how to achieve text effects, gradient effects, border picture effects," this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.