Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what border effects have been added to css3". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope that this article "what frame effects have been added to css3" can help you solve the problem.

Css3 added three new frame effects: 1, frame picture "border-image", you can add a background picture to the frame; 2, frame fillet "border-radius", you can add one or more rounded corners to the element; 3, frame shadow "box-shadow", you can add one or more shadows to the element box.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 has added three new border effects

Property indicates that CSSborder-image sets shorthand properties for all border images. 3border-radius A shorthand property for setting all four border-*-radius properties 3box-shadow with one or more drop-down box shadows 3

1. Frame picture "border-image"

The border-image property can add a background picture to the frame. The border-image attribute is now supported in the latest versions of all major browsers.

Syntax:

Description:

The border-image attribute needs to define three aspects.

(1) Image path.

(2) cutting width: the cutting width of four sides, followed by the top, right, bottom, and left (clockwise).

(3) Tile mode: there are three values, which are repeat, round and stretch.

In all the examples in this section, we use the 90px x 90px image shown in the figure as the background image of the frame.

Code example:

Div {width:210px; height:150px; border:30px solid gray; border-image:url (img/border.png) 30 repeat;}

The browser preview effect is shown in the following figure.

Analysis:

From the preview effect, we can see that the numbers 1, 3, 7 and 9 located in the four corners are still obediently located in the four corners. Then the 2, 4, 6, 8 of the four borders will continue to be tiled.

For the border-image attribute, we summarize as follows:

(1) when making a frame background picture, four sides should be made, and the middle part needs to be hollowed out.

(2) the width of each edge of the border background picture should be the same as the corresponding border width (i.e. border-width).

2. The rounded corner of the frame "border-radius"

The border-radius property can add a fillet effect to the border

The border-radius attribute defines the radius of the corner of the element, and the "fillet" style of any element can be achieved through the CSS border-radius attribute.

Syntax:

Border-radius: none | length {1jue 4} [/ length {1Jet 4}

Each of these values can be in the form of a numerical value or a percentage.

The first lenght of the length/length represents the radius in the horizontal direction, while the second represents the radius in the vertical direction.

If it is a value, then the four values top-left, top-right, bottom-right, and bottom-left are equal.

If there are two values, then top-left and bottom-right are equal, the first value, and the top-right and bottom-left values are equal, the second value.

If there are three values, the first value is to set top-left, while the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right.

If there are four values, the first value is to set top-left, and the second value is top-right, the third value is bottom-right, and the fourth value is to set bottom-left.

In addition to the abbreviations above, you can also write four corners, just like border, as follows:

Border-top-left-radius: / / upper left border-top-right-radius: / / upper right border-bottom-right-radius: / / lower right border-bottom-left-radius: / / lower left

The radius of the horizontal direction and the vertical direction are respectively. When the second value is omitted, the radius of the horizontal direction is equal to that of the vertical direction.

Border-radius supports border-radius standard syntax format only in the following versions of browsers: Firefox4.0+, Safari5.0+, Google Chrome 10.0 +, Opera 10.5 + and IE9+. For older browsers, border-radius needs to add different prefixes according to different browser kernels, such as "- moz" for Mozilla kernel and "- webkit" for Webkit kernel, but IE and Opera do not have proprietary formats. So for maximum compatibility with browsers, we need to set up the following:

-webkit-border-radius: 10px 20px 30px;-moz-border-radius: 10px 20px 30px; border-radius: 10px 20px 30px

Please write the standard form after the private form of the browser.

Example:

Img {border-radius: 30pxX margin: 100px;}

3. Border shadow "box-shadow"

In css, you can use the box-shadow property to achieve a border shadow effect, and the box-shadow property can set one or more drop-down shadow boxes.

Grammar

Box-shadow: h-shadow v-shadow blur spread color inset

Possible values:

Value indicates that h-shadow is required. The position of the horizontal shadow. Required to allow negative v-shadow. The position of the vertical shadow. Allow negative blur to be optional. Blur distance spread is optional. The size of the shadow color is optional. The color of the shadow. Inset is optional. Change the inner shadow from the outer shadow (at the beginning)

Note: the boxShadow property adds one or more drop-down shadows to the box. This attribute is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitting length is 0.

Use of the box-shadow attribute

1. A horizontal and vertical offset of 0 can also have shadows.

If the offset-x or offset-y value is 0, the shadow is behind the element, and giving the blur-radius or spread value can have a shadow effect.

Example:

The first div produces a shadow effect by setting blur-radius.

The second div produces a shadow effect by setting a positive value of spread.

The third div produces a shadow effect by setting a negative value of spread.

But there is one thing to note: extended shadows must be used in conjunction with shadow blur radii.

Personally, I think this term should not be used together, but it is not possible to just set extended shadows, because both extended shadows and shadow blur values can be positive. If there is only extended shadow, it will be parsed as a blur shadow by the browser, so it can also be simply understood as "extended shadow must be used in conjunction with shadow blur radius". If only extended shadow is used, it can be written as: box-shadow:0 001px;

Div {width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block;} .blur {box-shadow: 00 20px; / * box-shadow: 00 20px green;*/ / * you can also customize the color * /}. Spread-positive {box-shadow: 00 20px 5px; / * box-shadow: 00 20px 5px green * / / * you can also customize the color * /}. Spread-negative {box-shadow: 0 20px-5px; / * box-shadow: 0 20px-5px green;*/ / * you can also customize color * /}

2. Set horizontal and vertical offset to get shadow effect.

Outset case: the horizontal and vertical offset is 0, but without setting blur and spread, you can't see the shadow, because the perimeter of box-shadow is the same as border-box, so you can set the offset to make the shadow appear.

Inset case: horizontal and vertical offset is 0, do not set blur and spread, also can not see the shadow, because the perimeter of box-shadow and padding-box is the same, you can also set the offset to let the shadow display.

Example:

Div {width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block;} .shadow0 {box-shadow: 00;} .shadow1 {box-shadow: 1px 1px;} .shadow10 {box-shadow: 10px 10px;} .inset-shadow0 {box-shadow: 00 inset;}. Inset-shadow1 {box-shadow: 1px 1px inset;}. Inset-shadow10 {box-shadow: 10px 10px inset;}

3. Projection mode

The default projection method is outset, that is, external projection. You can set inset to project inward.

Example: the first div defaults to outset, the second sets inset, the third sets two shadows at the same time to better see the relationship between outset and inset, and the fourth div can see the inset shadow above the background and below the content.

Div {width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; vertical-align: top;} .outset {box-shadow: 10px 10px teal;} .inset {box-shadow: 10px 10px teal inset;} .double {box-shadow: 10px 10px teal inset,10px 10px teal;} .bg {background-color: yellow;} inset is shaded above the background and below the content

4. If the element also specifies the border-radius attribute, the shadow presents the same fillet.

Div {width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; border-radius: 50px;} .shadow {box-shadow: 00 10px 10px green;}

This is the end of the content about "what border effects have been added to css3". Thank you for 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.