您的位置：首页 > Web前端 > CSS

css学习之边框样式、外边距合并

2016-12-06 09:56 435 查看
边框的样式：

border-style：定义了10个不同的非继承样式，包括none

边框的单边框样式：

border-top-style

border-left-style

border-right-style

border-bottom-style

边框的宽度：

border-width

单边框：

border-top-width

border-left-width

border-right-width

border-bottom-width

边框颜色、边框的单边框颜色：

border-color

border-top-color

border-left-color

border-right-color

border-bottom-color

css3边框：

border-radius：圆角边框

box-shadow：边框阴影

border-image：边框图片

外边距合并：

外边距合并就是一个叠加的概念。

效果图



html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="bd">
<div class="pd">
<div class="content">Hello</div>
</div>
</div>
</div>
<div class="container1">
<div class="bd1">
<div class="pd1">
<div class="content1">Hello</div>
</div>
</div>
</div>
</body>
</html>
css:

body{
margin:0;
}
.container{
margin: 50px;
}
.bd{
border-style: groove;
}
.pd{
padding: 10px;
}
.content{
background-color: blue;
}
.container1{
margin: 100px;
}
.bd1{
border-style: groove;
}
.pd1{
padding: 10px;
}
.content1{
background-color: blue;
}


div外边距合并的话，如果一个div的外边距是100px；一个外边距是50px；那么最终按照100px来进行合并。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航