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

This article mainly introduces the relevant knowledge of "what are the knowledge points of the CSS3 frame module". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "what are the knowledge points of the CSS3 frame module" can help you solve the problem.

In the past, we could only set solid colors and monotonous styles for borders, while css3 provided many new properties for borders to support more complex effects.

Border fillet: border-radius

The border fillet attribute border-radius is one of the most commonly used attributes in CSS3. With this attribute, we no longer need image resources to implement the border fillet. Its format is as follows:

[length or percentage] {1pr 4} [/ length or percentage {1pr 4}]?

The above is written in the standard CSS attribute value description syntax, similar to common regular expressions. {1pr 4} represents a number between 1 and 4 (inclusive), "?" The number indicates 0 or 1. The above format is separated by / before and after. The first paragraph can have 1 to 4 length or percentage values, and the second paragraph can have 1 to 4 length or percentage values, but the second paragraph value can not be set.

For example, the following forms are legal:

25px/20px

25px20px

25px25px/20px

The value of the first paragraph defines the horizontal radius of the four fillets, the value of the second segment defines the vertical radius of the four fillets, and the four values set the top-left, top-right, bottom-right, and bottom-left4 fillets sequentially. When the value of the second paragraph is not set, the longitudinal radius is equal to the horizontal radius, for example, x1x2x3x4 and x1x2x3x4/x1x2x3x4 have the same meaning.

The setting effect of border-radius:x1x2x3x4/y1y2y3y4 is shown in the following figure:

Here is an example of a fillet:

# button {

Background-image:linear-gradient (top,#ECF2F6,#83BCF4)

Border:1px#5F88B7solid

Border-radius:4px

Padding:8px18px

Font-size:15px

}

Border-radius can be decomposed into four attributes: border-top-left-radius, border-top-rightradius, border-bottom-right-radius, and border-bottom-left-radius. We can use these four

Properties to set the fillets of the four corners respectively.

Border-radius has a very interesting feature: to achieve a variety of circular effects. The code to implement a circle is as follows:

Width:100px

Height:100px

Border-radius:50px

Background-color:#2ec8e9

The code to implement the four circles is as follows:

Width:100px

Height:100px

Border-bottom-left-radius:100px

Background-color:#2ec8e9

The code to implement the eight circles is as follows:

Width:0px

Border-left:100pxsolidtransparent

Border-top:100pxsolid#2ec8e9

Border-top-left-radius:100px

Border color: border-color

Using the border color property border-color, we can create very cool color effects for the border, such as the following code:

The beauty of HTML5 and CSS3.

Border image: border-image

The border image property allows us to use the picture to define the style of the border. Another function is that you can set the border in a way similar to the Windows desktop background, using a small picture to achieve a large border effect.

The border-image attribute can be decomposed into four attributes, namely border-image-source, border-imageslice, border-image-width, and border-image-repeat, which are described in more detail below.

1.border-image-source

Border-image-source is used to specify the URL address of the border image, which is similar to the background-url property.

2.border-image-slice

The border-image-slice property divides the image into nine squares and trims the image according to the set value, as shown in the following illustration, you can set one or more values for it, like margin. When setting a value, the trimming of top, right, bottom and left direction all use this value; when setting two values, top and bottom use the former value, left and right use the latter value; when setting three values, top uses the first value, left and right use the second value, and bottom uses the third value; if you set four values, they correspond to the four directions of top, right, bottom and left.

It can be explained here that border-image-slice can be trimmed by percentage and pixel, as shown in the following figure:

Note that when border-image-slice is trimmed in pixels, its value is undivided, such as border-imageslice:17.

3.border-image-width

Border-image-width defines the display area of the border image, which needs to be used with border-image-slice, separated by slashes, and written as border-image-slice/border-image-width. In addition, we can use the border-width property to define the width of the border, and the effects of the following two formats are exactly the same:

Border-image:url (border.png) 50/17px

/ * 50 is the value of border-image-slice, and 17px is the value of border-image-width attribute * /

And

Border-image:url (border.png) 50 bordercolor widthlu 17px

Note that unlike border-image-slice, border-image-width values must be added with units, such as 17px.

4.border-image-repeat

Border-image-repeat defines how cropped top, right, bottom, and left images are arranged, scaled or tiled, and has three values, stretch, repeat, and round. Stretch is the default value for stretching, repeat for repetition, and round for tiling. The difference between repeat and round is that when set to repeat, only part of the image can be displayed, while when set to round, if the length or width is not an integral multiple of the image, the image will stretch to ensure that the number of images displayed is an integer.

The display effect of stretch, repeat and round is shown in the following figure. Please note the slight difference between repeat and round.

Note that the value of border-image-repeat cannot exceed 2. When the values are two, the first one defines how the top and bottom border images are arranged, and the second defines how the left and right border images are arranged. In addition, at the time of writing, in WebKit kernel browsers (such as Chrome and Safari), the duration value has not yet been implemented, and its effect is the same as that of repeat.

The above four attributes can be combined into border-image attributes. In the CSS standard, it is possible to use a single attribute or a composite form, but now many browsers do not support the form of a single attribute. The following two types of code have exactly the same effect:

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

Border-image-slice:105

Border-image-width:12px

Border-image-repeat:repeat

And

Border-image:url (border.png) 105/12pxrepeat

Well, with the border-image attribute, we can achieve an adaptive complex border effect through a small image.

Box Shadows: box-shadow

The box shadow attribute box-shadow sets the shadow effect for the box element in the following format:

Box-shadow: shadow type x axis displacement y axis displacement blur radius shadow size shadow color

Here is a brief description of the role of each of these parameters.

When the  shadow type is not set, it defaults to outer shadows, and when set to inset represents inner shadows.

The  x-axis displacement represents the horizontal displacement of the shadow, a positive value indicates a right offset, and a negative value indicates a left offset.

The  y-axis displacement represents the vertical displacement of the shadow, a positive value indicates a downward offset, and a negative value indicates an upward offset.

The  blur radius controls the size of the blurred area of the shadow, and a value of 0 means that the shadow is not blurred.

The  shadow size controls the size and range of shadows. 9819

This is the end of the content about "what are the knowledge points of the CSS3 frame module". 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.