Implement rounded corners effect in css3-Front-end Q&A-php.cn

Implement rounded corners effect in css3

WBOY

Release： 2022-08-11 17:28:35

Original

3182 people have browsed it

In css3, you can use the "border-radius" attribute to achieve the rounded corner effect. This attribute is used to set the outer border rounded corners of the element, and this attribute is an abbreviated attribute that can be used to set four separate The style of rounded corners, the syntax is "element object {border-radius: 1-4 length|% / 1-4 length|%;}".

Implement rounded corners effect in css3

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

Achieving rounded corners in css3

border-radius allows you to set the outer border of an element to be rounded. Determines a circle when using one radius and an ellipse when using two radii. The intersection of this (oval) circle and the border creates a rounded corner effect.

The border-radius attribute is a composite attribute that can specify up to four border-*-radius attributes

Syntax

border-radius: 1-4 length|% / 1-4 length|%;

Copy after login

Note: each The order of the four values of radius is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.

length defines the shape of the curve.
% Use % to define the shape of the corners.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Copy after login

Output result:

Implement rounded corners effect in css3

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Implement rounded corners effect in css3. For more information, please follow other related articles on the PHP Chinese website!