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

CSS常用样式总结

2017-07-27 17:08 330 查看
CSS书写规范：

影响布局的样式全部写在前面，可被继承的样式属性写在后面。如下：

{
display: block;
margin-bottom: 10px;
vertical-align: top;
line-height: 18px;
font-size: 16px;
color: red;
background: #fff;
}


单行文本溢出省略

{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


实现效果：


清楚浮动

ul:after{
display: block;
content: ".";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}


滤镜模糊效果

效果图：



代码如下：

&l
4000
t;!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box-wrapper{
position: relative;
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
.img{
margin: 75px auto;
width: 200px;
height: 150px;
}
.background{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -999;
filter: blur(4px);     // 模糊效果
background: url(gitar.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="img">
<img src="gitar.jpg" alt="" width="200" height="150">
</div>
<div class="background"></div>
</div>
</body>
</html>


后续慢慢补充…….
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航