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

This article mainly explains the "hungry method course of setting frame fillet with css". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the hungry method tutorial of setting frame fillet with css".

In css, you can use the border-radius attribute to set the border fillet. The function of this attribute is to add a fillet effect to the border. You only need to add the "border-radius: fillet radius value;" style to the element, and you can set the fillet effect of four borders at the same time.

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

The most common and easiest way for css to set border fillets is to use the border-radius property.

The CSS 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.

Let me give you a few examples to see the effect:

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

Effect:

The radius of all four corners is 30px.

And look at a standard circle and an ellipse:

P {display: inline-block;border: 10px solid red;}. Circle {width: 50pxTH height: 50pxTH: 50pxTH: 50px: 50px: 50px: 50%; elipse {width: 50px: 50px: 100px;: 50px;: 50px: 50px: 50px: 50px: 50px: 50px: 50%: 50%: 50%;}

Effect:

The difference between the first p and the second p mainly lies in whether it is square or rectangular. The circle can be used instead of the picture of the circle in rotation.

The above are examples where the horizontal and vertical radii are equal. Here are two examples where the horizontal and vertical radii are different:

P {display: inline-block;border: 10px solid red;margin: 100px;} .p1 {width: 200pxposition height: 100pxborderlyradius: 0px 50px 32px/28px 50px 70px;} .p2 {width: 100pxpolitical height: 200pxborderflowr radius: 26px 106px 162px 32px/28px 80px 178px 26px;} .p3 {width: 100pxborderheight: 200pxborderhouse radius: 20px 50px/ 20px 50px;}

The effect is as follows:

Thank you for your reading, the above is the content of the "hungry method tutorial of setting frame fillet with css". After the study of this article, I believe you have a deeper understanding of the problem of hungry method tutorial of setting frame fillet with css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.