精通CSS/四/多个背景图像&border-image

最新推荐文章于 2020-02-15 12:40:05 发布

孤岛浅滩

最新推荐文章于 2020-02-15 12:40:05 发布

阅读量627

点赞数

分类专栏： notes 文章标签： css 笔记基础

本文链接：https://blog.csdn.net/m0_37851778/article/details/73087291

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

1.多个背景图像

<!doctype html>
<html>
<head>
	<title>My Rounded Corner Box</title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css">
	<style type="text/css">


	.box{
		width: 30em;
		background: #88ac11 url(images/mtop-left.gif) no-repeat top left;
		color:#fff;
		padding:2em 2em 1em 2em ;
		margin-top: 2em;
	}
	h2{
		margin-top: 0;
		font-size: 1.6em;
	}
	/*在一个div中定义多个图像，通过对该属性值的一一对应从而应用样式*/
	.box{
		background-image: url(images/mtop-left.gif),url(images/mtop-right.gif),url(images/mbottom-left.gif),url(images/mbottom-right.gif);
		background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
		background-position: top left,top right,bottom left,bottom right;
	}
	</style>
</head>
<body>
	<div class="box">
		<h2>My Rounded Corner Box</h2>
		<p>
			This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images.
		</p>
	</div>
</body>
</html>

Result:

2.border-image

<!doctype html>
<html>
<head>
	<title>border-image</title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css">
	<style type="text/css">
	.box{
		width: 30em;
		background: #89ac11;
		padding: 2em 2em 1em 2em;
		color:#fff;
		margin-top: 2em;
	}
	.box h2{
		margin-top: 0;
		font-size: 1.6em;
	}
	.box p{
		margin-bottom: 0;
		line-height: 1.5em;
	}
	/*【转】border-image详解：
	http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/
	图像来源（①注意图像名字正确与否②路径，弄明白相对于谁）/划分区域大小（九宫格）/裁剪大小/水平/垂直（repeat/round/stretch）
	repeat:按照原始规则一一置放，最后打破原始规则来适应环境（带有残缺）;
	around:开始就按照环境计算出适应的个体大小，从而铺满整个区域。
	*/
	.box{
		-webkit-border-image:url(images/corners.gif) 25% 25% 25% 25%/25px round round;
	}
	</style>
</head>
<body>
	<div class="box">
		<h2>My Rounded Corner Box</h2>
		<p>
			This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images.
		</p>
	</div>
</body>
</html>

Result:

孤岛浅滩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精通CSS/四/多个背景图像&border-image

1.多个背景图像 My Rounded Corner Box .box{ width: 30em; background: #88ac11 url(images/mtop-left.gif) no-repeat top left; color:#fff; padding:2em 2em 1em 2em ; margin-top: 2em; } h
复制链接

扫一扫