Home > Web Front-end > HTML Tutorial > Introduction to the rounded border-radius property? (code introduction)

Introduction to the rounded border-radius property? (code introduction)

PHPz
Release: 2018-10-23 10:22:57
forward
2174 people have browsed it

What this article brings to you is an introduction to the border-radius property of rounded corners? (Code introduction), has certain reference value, friends in need can refer to it.


We are on many websites Including the effect of rounded corners can often be seen. In terms of user experience and psychology, the rounded corner effect is often more beautiful and generous.

In CSS2.1, achieving rounded corners for elements is a headache. The old method is to use background images to achieve this, which is relatively troublesome to create. However, the emergence of the border-radius attribute in CSS3 perfectly solves the problem of difficulty in achieving the rounded corner effect.

In addition, in front-end development, for web design, we all adhere to the principle of "using as few images as possible". If the effect can be achieved with CSS, try not to use images. Because the image needs to trigger an http request and the transmission volume is large, it affects the web page loading performance. Just like these small icons at the bottom of the tutorial article, they are all implemented using "custom small icon font" instead of using pictures. In the CSS advanced tutorial, we have the opportunity to discuss in detail the technique of "customizing small icon fonts".

For example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:10px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>
Copy after login

The preview effect in the browser is as follows:

Introduction to the rounded border-radius property? (code introduction)

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template