Home >Web Front-end >HTML Tutorial >Introduction to the rounded border-radius property? (code introduction)
Introduction to the rounded border-radius property? (code introduction)
- PHPzforward
- 2016-06-24 11:52:352166browse
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>The preview effect in the browser is as follows:
