css3 border-radius is used to set the rounded corner effect of HTML elements, but only IE9, chorme and firefox browsers support this property, IE8 and below browsers are not compatible and do not support the border-radius property, this article will introduce how to solve IE8 Compatible with the border-radius property method, friends who need it can refer to it.
Border-radius is a property of CSS3, so earlier browsers will not support this property. How can border-radius be compatible with older browsers?
[The first method: PIE.HTC or ie-css3.htc]
[Under extension, .htc can make ie support many css3 properties, which are summarized in the following article]
We can use a plugin available online to solve this problem.
Step 1: Download the PIE.HTC file: download link http://css3pie.com/download/
Step 2: Use behavior to notify the browser to call the script, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Compatible with rounded corners</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 400px;
height: 400px;
margin: 10px;
border: 1px solid red;
/* Firefox */
-moz-border-radius: 15px;
/* Safari and Chrome
-webkit-border-radius: 15px;
/* Opera 10.5+, and IE browsers using IE-CSS3 */
border-radius: 15px;
/*The key attribute setting needs to set the path, and notify the IE browser to call the script to act on the 'box' class*/
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
IE8 browser effect:
The second method: DD_roundies to achieve rounded corners
DD_roundies download address:
DD_roundies.js：http://pan.baidu.com/s/1o68wluE
DD_roundies.min.js：http://pan.baidu.com/s/1jGqTwI6
<!DOCTYPE HTML>
<html>
<head>
<title>http://www.manongjc.com/article/1214.html</title>
<script src="DD_roundies.js"></script>
</head>
<body>
<div class="test" style="background-image:url(2.jpg);width:88px;height:106px;">
</div>
<img src="2.jpg" alt="" class="test"/>
<script type="text/javascript">
DD_roundies.addRule('.test', '10px 10px', true);
</script>
</body>
</html>
The third method: SVG realizes the effect of rounded corners of pictures
The implementation principles here are applicable to all kinds of SVG regular or irregular graphics.
The key to realizing rounded corners of images in SVG is to use the element <pattern>.
For example, if you realize the circular effect of the picture named test.jpg, the size is 100px * 100px, the SVG code is as follows:
<svg width="100" height="100">
<desc>SVG rounded corner effect</desc>
<defs>
<pattern id="raduisImage" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="test.jpg" x="0" y="0" width="625" height="605" />
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#raduisImage)"></circle>
</svg>
Graphical elements have a fill attribute, and let its value url anchor to the id of <pattern>.
The fourth method: Canvas realizes the effect of rounded corners of pictures
This rule applies to regular or irregular graphics drawn by various Canvas.
The key to achieving rounded image corners in Canvas is to use "texture fill".
There is a method called createPattern in Canvas, which can convert picture elements of known size into texture objects for filling.
For example, if the image circle effect named test.jpg is implemented and the size is 100px * 100px, the main JS code is as follows:
// canvas element, picture element
var canvas = document.querySelector("#canvas"), image = new Image();
var context = canvas.getContext("2d");
image.onload = function() {
// Create image texture http://www.manongjc.com/article/1214.html
var pattern = context.createPattern(image, "no-repeat");
// draw a circle
context.arc(50, 50, 50, 0, 2 * Math.PI);
// fill the drawn circle
context.fillStyle = pattern;
context.fill();
};
image.src = "test.jpg";
Just set the value of the fillStyle property of the Canvas context equal to the texture object.
.