你不知道的css
2019-04-23 本文已影响0人
locky丶
一个background可以写多个背景图
插入样式
<style>
.img-wrap {
width: 255px;
height: 190px;
background-image: url(./images/1.jpg);
position: relative;
z-index: 0;
}
.img-wrap:before,
.img-wrap:after {
content: '';
position: absolute;
z-index: -1;
}
.img-wrap:before {
width: 200px;
height: 200px;
background-image: url(./images/2.png)
}
.img-wrap:after {
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background-image: url(./images/3.jpg)
}
</style>
插入html
<body>
<div class='img-wrap'>
</div>
</body>
文字前插图片，并保持上下对齐
插入样式
<style>
body,
html,
p {
margin: 0;
padding: 0;
}
.main>p {
font-size: 20px;
line-height: 1.5;
animation: fontSize 5s infinite alternate
}
.main>p img {
width: 20px;
height: 20px;
vertical-align: 25%;
position: relative;
top: 10px; // 图标的高度减半
}
</style>
插入html
<body>
<div class='main'>
<p>
<img src="./images/icon.png">
文字
</p>
</div>
</body>
省略号
.text-container{
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
"生僻属性" writing-mode
模拟按钮按下状态
.btn:active{
text-indent:2px;
}
.vertical-mode{
writing-mode: tb-rl;
writing-mode: vertical-rl;
}
图标90°旋转
// 样式
@font-face{
font-family: Arrow;
src: url('fonts/12/arrow.eot?');
src: local('Any'),
url('/fonts/12/arrow.woff');
}
.icon-play{
font-family: Arrow;
}
.vertical-mode{
writing-mode: tb-rl;
writing-mode: vertical-rl;
}
// html
<span class="icon-play">r</span>
<span class="icon-play verticle-mode">r</span>
填充网页下方剩余的背景色
.footer{
position: absolute;
left: 0; right: 0;
text-align: center;
background-color: green;
outline: 999px solid green;
clip: rect(0 999px 999px 0);
}
全屏上下居中对齐的方式
// style
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.box {
height: 100%;
background: rgba(0, 0, 0, 0.8)
}
.content {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgb(235, 26, 78);
width: 100px;
height: 100px;
}
// html
<body>
<div class='box'>
<div class='content'></div>
</div>
</body>
