CSS3背景与边框相关样式

</head>
<style>
div{
background-color:#FC0;
box-shadow:10px 10px 10px gray;//盒子阴影的添加
width:200px;
height:100px;
}

</style>
<body>
<div>

</div>

</body>
</html>

 

</head>
<style>
div{
background-color:black;
border:dashed 15px green;//边框
padding:30px;
color:white;
font-size:30px;
font-weight:bold;
background-image:url (tupian);//放置图片
background-repeat:no-repeat;//图片不重复
}
/*第一个背景充满整个div*/
.div1{
background-origin:border-box;//绘制图片的位置
background-clip: border-box;
}
/*第二个不包含边框*/
.div2{
margin-top:40px;
background-origin:padding-box;//绘制图片的位置
background-clip: padding-box;
}
/*只有内容区域添加上*/
.div3{
margin-top:40px;
background-origin:content-box;//绘制图片的位置
background-clip: content-box;
}

</style>
<body>
<div class="div1">示例1</div>
<div class="div2">示例1</div>
<div class="div3">示例1</div>

</body>
</html>

posted @ 2015-07-29 16:00  大发明家  阅读(77)  评论(0编辑  收藏  举报