效果：
块阴影和圆角阴影：box-shadow text-shadow
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
/*设置块阴影
参数一:水平偏移
参数二:垂直偏移
参数三:模糊距离
参数四:阴影颜色
*/
box-shadow: 10px 10px 10px blue;
}
</style>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
效果：
圆角：border-radius
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
}
.test1{
/*底部左边*/
border-bottom-left-radius: 30px;
}
.test2{
/*顶部右边*/
border-top-right-radius: 30px;
}
.test3{
/*底部右边*/
border-bottom-right-radius: 30px;
}
.test4{
/*顶部左边*/
border-top-left-radius: 30px;
}
.test5{
/*四个角*/
border-radius: 10px;
}
</style>
<body>
<div class="test1">div</div>
<div class="test2">div</div>
<div class="test3">div</div>
<div class="test4">div</div>
<div class="test5">div</div>
</body>
效果：
边框图片：border-image(不常用，用到再说)
形变：transform: none | []（后面结合实例，便于理解）
CSS布局
默认情况下，所有网页标签都在标准流布局中（从上往下，从左往右，相互依赖）
脱离标准流（就是固定在一个地方），脱离标准流主要的两种方式有两种
注意：标签只要一浮动，它的类型就会被强制转为行内块级标签
float属性：让标签浮动在父标签的左边和右边（显然不够灵活）
left：浮动在父标签的最左边
right：浮动在父标签的最右边
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
}
.test1{
background-color: red;
float: left;
}
.test2{
background-color: blue;
float: right;
}
</style>
<body>
<div id="main">
<div class="test1">左</div>
<div class="test2">右</div>
</div>
</body>
效果：
position属性：结合left、right、top、bottom属性就不一样了（显然这个比较厉害）
注意：他的位置是相对于浏览器窗口来决定的
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
}
.test1{
background-color: red;
position: absolute;
top: 20px;
left: 20px;
}
.test2{
background-color: blue;
position: absolute;
bottom: 20px;
right: 20px;
}
</style>
<body>
<div id="main">
<div class="test1">左</div>
<div class="test2">右</div>
</div>
</body>
效果：
居中
水平居中
如果是行内、行内块级标签，设置text-align: center;
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
}
span{
background-color: blue;
}
</style>
<body>
<div id="main">
<span>行内标签</span>
</div>
</body>
效果：
如果是块级标签，则需设置 margin: 0 auto;
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
}
.test1{
width: 200px;
background-color: blue;
text-align: center;
margin-left: auto;
margin-right: auto;
/*或者*/
/*margin: 0 auto;*/
}
</style>
<body>
<div id="main">
<div class="test1">块级标签</div>
</div>
</body>
效果：
垂直居中
如果是行内、行内块级标签，设置line-height:总高度;
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
}
.test1{
width: 350px;
height: 30px;
background-color: blue;
/*设置垂直居中,让它等于父标签的高度*/
line-height: 200px;
}
</style>
<body>
<div id="main">
<span class="test1">行内标签</span>
</div>
</body>
效果：
如果是块级标签，需要通过定位来做（一般不会将块级标签做垂直居中操作）
<style>
#main{
background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
/*告诉父标签使用绝对定位*/
position: relative;
}
.test1{
width: 200px;
height: 30px;
background-color: blue;
/*重写,设置内容居中*/
line-height: 30px;
margin: 0 auto;
/*设置相对路径*/
position: absolute;
top:50%;
left:50%;
/*平移使其与父标签居中显示*/
transform: translate(-50%, -50%);
}
</style>
<body>
<div id="main">
<span class="test1">行内标签</span>
</div>
</body>
效果：
昨晚的文章不完整，这个才是第二篇的完整版，对造成的不便感到抱歉，综合实例单独做一篇吧！
相关文章
精彩导读
热门资讯
关注我们
