CSS小技巧

最新推荐文章于 2025-02-11 11:15:40 发布

原创最新推荐文章于 2025-02-11 11:15:40 发布 · 201 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3

CSS 专栏收录该内容

1 篇文章

订阅专栏

1.清除网页的外边距，让网页全屏显示

html,body{
    margin:0;
    padding:0;
}

2.把图片变为适合屏幕的全屏

img{
    background-size:cover;
}

3.把图片放在中间

img{
    background-position:center;
}

4.让横向滚动条消失

body{
    overflow-x: hidden;
}

5.将一个div进行全屏居中，并带有阴影效果

div#dialog{
		width: 300px;
		height: 150px;
		position: absolute;
		top: 0%;
		bottom: 0%;
		left: 0%;
		right: 0%;
		margin: auto;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 5px 5px 20px rgba(200,200,200,.7),-5px -5px 20px rgba(200,200,200,.7);
	}

6.整个标签居中(相对于父标签)

div{
    width:100px;
    height:100px;
    margin:0 auto;
}

7.改变子的间距与基本样式

div{
    font-size:1.5em;
    font-family:'微软雅黑';
    font-weight: bold;
	line-height: 10px;
}

8.动画(一)
先定义一个div和一个class
例如

#section1:hover{
    width:200px;
    background-color:rgba(255,34,56,0.5);
}
#section1{
    -webkit-transition:width 2s,background-color 3s;
}

9.动画(二)
先定义一个div和class
例如

@keyframes section1
{
    from{
        width:20px;
    }
    to{
        width:200px;
    }
}
#section1{
    -webkit-animation:section1 2s infinite(循环);
}

10.背景颜色渐变

img{
    background-image:linear-gradient(left, red 100px, yellow 200px);
    background-image:linear-gradient(left top, red 100px, yellow 200px);
}

但是为了兼容,有时候要写多个前缀,变成如下:

img{
    background-image: -ms-linear-gradient(top,#fff,#dededc);
    background-image: -moz-linear-gradient(top,#fff,#dededc);
    background-image: -webkit-gradient(linear, left top, left         bottom,from(#fff),to(#dededc));
    background-image: -o-linear-gradient(top,#fff,#dededc);
    background-image: linear-gradient(top,#fff,#dededc);
}