Home > Article > Web Front-end > How to set rounded corners for images in css
How to set rounded corners for images in css
- 醉折花枝作酒筹Original
- 2021-07-26 11:10:2517636browse
In CSS, you can use the border-radius attribute to set rounded corners for images. You only need to set the "border-radius: value;" style to the image element. Providing a value for this property sets the radii of all four corners at the same time. All legal CSS measurements can be used.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS3 rounded corners only need to set one property: border-radius (meaning "border radius"). You provide a value for this property to set the radii of all four corners at the same time. All legal CSS measurements can be used: em, ex, pt, px, percentage, etc.
Example:
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
<title>设置背景圆角</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<style type="text/css">
.normal{
background-image: url(images/rest.png);
width: 215px;
height: 215px;
border-radius: 50%;
background-size: 215px;
background-repeat: no-repeat;
background-position-y: 9%;
}
</style>
</head>
<body>
<!--
原图尺寸是：599*531px的
-->
<div></div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>
</html>Original picture:
The effect after setting the background:
Recommended learning: css video tutorial
The above is the detailed content of How to set rounded corners for images in css. For more information, please follow other related articles on the PHP Chinese website!