CSS 部分小特效

最新推荐文章于 2025-05-17 16:31:49 发布

suixi2011

最新推荐文章于 2025-05-17 16:31:49 发布

阅读量960

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/suixi2011/article/details/38559953

CSS 专栏收录该内容

1 篇文章

订阅专栏

从其他地方提取出来部分小特效

1、三角形

{
    display:inline-block;
    border-right:6px solid transparent;
    border-bottom:6px solid #ffffff;
    border-right:6px solid transparent;
}

2、阴影

{
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
}

3、圆角

{
	-wekit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}

4、渐变色

{
	background-color:#f5f5f5;
	*background-color:#e6e6e6;
	background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);
	background-image:-webkit-gradient(linear,0,0,0 100%,from(#ffffff),to(#e6e6e6));
	background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);
	background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);
}

5、文本框点击后四周变色

input[type="text"]:focus{
	border-color:rgba(82,168,236,0.8);
	outline:0;
	outline:thin dotted \9;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
	-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}

6、设置底部始终在下面

底部的上一个div，不是父类div ，设置为

{
	min-height:100%;
	height:auto !important;
	height:100%;
}

7、背景透明

{
    background-color:transparent;
}

8、边框阴影

{
    border: 1px solid #CECBCE;
    box-shadow: 0 0 5px #DDDDDD;
    border-radius:6px;
}

9、表格边距

table{
	border-collapse: separate;
	border-spacing: 20px 20px;
	width: 100%;
	height: 100%
}

10、斜行背景

.disableds {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px);
    opacity: 0.6;
}