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

This article mainly introduces the relevant knowledge of "CSS3 border attribute case analysis", the editor shows you the operation process through the actual case, the operation method is simple and fast, practical, I hope this "CSS3 frame attribute case analysis" article can help you solve the problem.

Before learning CSS3, we must know the compatibility of browsers, which is very important. There is no W3C standard for CSS3, but all mainstream servers already support many new features. Almost all CSS3 attributes support Firefox browsers with IE8 above and prefix-moz-, Google Chrome browsers with prefix-webkit-, Safari browsers with prefix-webkit-, browsers with Opera12.1 and above. So basically there is no big problem in terms of compatibility. However, after you finish writing, you must test it in order to avoid problems.

Next, let's start with some basic CSS3 attributes.

Here, we mainly learn three border properties:

1. CSS3 fillet

In CSS3, it is easy to create a fillet, which can be created with border-radius. The value can be a pixel (px), a percentage (%), or you can add a corner separately, for example:

2. Shadow of CSS3 box

The box-shadow attribute in CSS3 is used to add shadows, and this effect is often used in normal development, including unilateral shadows, multilateral shadows and so on. For example:

3. CSS3 border picture

We can use the border-image property to create a border with the image to make our border more colorful, such as:

Using the CSS3 border-radius attribute, you can fillet any element. Can be set at the same time, for example:

You can also create elliptical corners, such as:

CSS3 includes several new background attributes that provide greater control over background elements, as follows:

We can add background images through background-image. Different background images and images are separated by commas. Of all the images, the first one is displayed at the top.

Then set several different properties for different images. For example:

Background-size specifies the size of the background image.

Background-repeat specifies whether the picture is double-filled or not.

The background-Origin property specifies the location area of the background image

The background-clip background clipping property is drawn from the specified location.

For example:

The values of background-Origin attribute and background-clip attribute are content-box, padding-box, and border-box, such as stored or clipped in the following figure:

CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors. It defines two types of gradients:

1. Linear gradient

To create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can set a starting point and a direction (or an angle). For example, here is a linear gradient from top to bottom:

At the same time, you can also try this linear gradient-from left to right, linear gradient-diagonal, for example:

The following example shows how to create a linear gradient with rainbow colors and text:

Use transparency (transparent), for example:

Repeated linear gradients, such as:

2. Radial gradient

The radial gradient is defined by its center.

To create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval) and size of the gradient. By default, the center of the gradient is center (for the center point), the shape of the gradient is ellipse (for oval), and the size of the gradient is farthest-corner (for the farthest corner).

For example, set a radial gradient with a circular shape:

The shape parameter defines the shape. It can be a value of circle or ellipse. Where circle represents a circle and ellipse represents an oval. The default value is ellipse.

The size parameter defines the size of the gradient. It can be the following four values:

3. Repetitive radial gradient

The repeating-radial-gradient () function is used to repeat radial gradients.

For example:

Here, I mainly explain the following text attributes:

1. CSS3 text Shadow

It is also done by four property values, specifying horizontal shadows, vertical shadows, blurred distances, and the color of shadows. For example:

2. CSS3 Text Overflow attribute

This property is also used a lot, mainly limiting the content of the overflow, but used in conjunction with other properties.

3. Line wrapping of CSS3

The CSS3 word split newline property specifies the newline rule:

Note: the word-break property is not compatible with Opera.

4. New text attributes

Hanging-punctuation: specifies whether the punctuation character is outside the wireframe.

Punctuation-trim: specifies whether punctuation characters are trimmed.

Text-align-last: sets how to align the last line or the line immediately before the forced newline character.

Text-emphasis: applies accent tags and the foreground color of accent tags to the text of the element.

Text-justify: specifies the alignment method to be used when text-align is set to "justify".

Text-outline: specifies the outline of the text.

With CSS3, a web designer can use any font he or she likes. When you find the font file you want to use, simply include the font file in the website and it will be automatically downloaded to the users who need it.

This is the end of the content of "CSS3 Border attribute instance Analysis". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.