首页 > 代码库 > css3 border-image

css3 border-image

2024-09-06 00:06:50   219人阅读

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#stretch {
				border: 15px solid transparent;
				width: 300px;
				border-image-source: url(img/isux.png);
				border-image-slice: 20%;
				border-width: 10px;
				border-image-repeat: round;
				/* round  repeat  Stretch*/
			}
			
			.border-image-btn {
				border: 18px solid green;
				border-width: 0 18px;
				-webkit-border-image: url("img/button_sprite.png") 0 18 50 18;
				-moz-border-image: url("img/button_sprite.png") 0 18 50 18;
				-o-border-image: url("img/button_sprite.png") 0 18 50 18;
				border-image: url("img/button_sprite.png") 0 18 50 18;
				padding: 13px 10px 17px;
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				text-decoration: none;
				line-height: 15px;
			}
			
			.border-image-btn:hover {
				-webkit-border-image: url("img/button_sprite.png") 50 18 0 18;
				-moz-border-image: url("img/button_sprite.png) 50 18 0 18;
				-o-border-image: url("img/button_sprite.png") 50 18 0 18;
				border-image: url("img/button_sprite.png") 50 18 0 18;
				color: #000;
				border-color: yellow;
				text-decoration: none;
			}
			
			
		</style>
	</head>

	<body>
		<input type="button" name="" id="" class="border-image-btn" value="http://www.mamicode.com/测 试" />
		<div id="stretch">
			asd
		</div>
	</body>

</html>

　　

css3 border-image


联系
我们