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

前端入门——CSS盒子模型

2019-02-19 23:09 435 查看

盒模型——内边距 padding

属性	描述
padding	设置所有内边距
padding-left	设置左内边距
padding-right	设置右内边距
padding-top	设置上内边距
padding-bottom	设置底部内边距

盒模型——边框

描述	属性
边框样式	border-style
单边框样式（上）	border-top-style
边框颜色	border-color
单边框颜色（上）	border-top-color
边框宽度	border-width
单边框宽度（上）	border-top-width

CSS新增属性

描述	属性
圆角边框	border-radius
阴影效果	box-shadow
边框图片	border-image

<!--HTML-->
<body>
<p id="p1">Hello World!</p>
<br><br>
<div id="div1"></div>
</body>

<!--CSS-->
#p1{
border-radius:30px;
width:150px;
background-color:#ccccff;
border:2px solid #ccbbaa;
}

#div1{
width:150px;
height:150px;
background:#abcdef;
box-shadow:10px 10px 5px #fcdddd;     /*前两个为偏移量 清晰度  颜色*/
}

外边距合并

不会叠加，而是以多的一方为边距的长度

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航