CSS3小技术（一）

时间 2019-11-17

标签 css3 css 技术栏目 CSS 繁體版

原文原文链接

1 给背景增长阴影

这里及介绍两个方法 css

通用的非CSS3： html

img{
	background-color: #fff;
	border:1px solid #a9a9a9;
	padding:4px;
	margin:-5px 5px 5px -5px;  //用负的外边距来事图像偏移，露出背景色来产生阴影
}

CSS3：前端

img{
	box-shadow:3px 3px 6px #666;//投影的垂直和水平偏移，投影宽度，颜色 
}

2 圆角框

CSS3标准中增长了圆角框，不在单单的只有直角，并且对代码的调试和维护更加简单。省略了在Photoshop和浏览器的切换。我我的感受这个标准很好，现代浏览器也都在支持。 css3

box{
    border-radius:1em;			
    -moz-border-radius:1em;		//Mozilla 前缀
    -webkit-border-radius:1em;	        //Safari 前缀
}

3不透明度

不透明度通常会在弹出对话框中使用，另外在一些菜单中也会采用。另外，不透明度能够和圆角框一块儿使用，也没有问题。 web

.alert{
	background-color:#fff;
	border-radius:2em;
	opacity:0.8;
	filter:alpha(opacity=80);   //IE 
}

另外一种方法，在背景色中一块儿设置：

.alert{
	background-color:rgba(0,0,0,0.8);
	border-radius:1em;
}

4图像翻转

1.多个图像应用，经过改变背景样式，这样会请求数量比较多，效率较低。这里再也不赘述。
2.应用一个长图像来改变对齐方式使不一样部分的图像相应显示。好处是减小请求次数，加快效率，不会延迟。要求图像像素彻底掌握，清除像素位置。 express

a:link,a:visited{
	display:block;
	background-image:urrl(xxx) -200px 0 no-repeat;
	width:203px;
	height:72px;
	text-indent:-1000em;
	text-decoration:none;

}
a:hover,a:focus{
	background-position:right top;
}
a:active{
	background-position:left top;
}

可是上述代码在IE中仍是会发送HTTP请求。因此咱们又须要如下代码：

html{
       filter:expression(document.execCommend("BackgroundImageCache",false,true))
}

这样咱们打开IE背景缓存来缓存背景，或者将背景应用在父标签上。

5运用css3 text-shadow box-shadow border-radius建立多样式按钮实例

a{
	display:block;
	width:6.6em;
	height:1.4em;
	line-height:1.4;
	text-align:center;
	text-decoration:none;
	border:1px solid #66044;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	background-colot:green;
	color:#fff;
        text-shadow:2px 2px 2px #66a300;
	-moz-box-shadow:2px 2px 2px #ccc;
	-webkit-box-shadow:2px 2px 2px #ccc;
	box-shadow:2px 2px 2px #ccc;
}

6制做一个水平的页码导航条

<style type="text/css">
	ol.page{
		margin:0;
		padding:0;
		list-style-type:none;}//去除前端修饰
	ol.page li{
		float:left;
		margin-right:0.6;}
	ol.page a,
	ol.page li.selected{
		display:block;
		padding:0.3em 0.5em;
		border:1px solid #ccc;
		text-decoration:none;}//去除下划线
	ol.page a:hover,
	ol.page a:focus,
	ol.page li.selected{
		background-color:blue;
		color:white;}	
	ol.page a[rel="prev"]       
	ol.page a[rel="next"]{
		border:none;}		//去除箭头边框
	ol.page a[rel="prev"]:before{
		content:"\00AB";
		padding-right:0.2em;}//增长箭头
	ol.page a[rel="next"]:after{
		content:"\00BB";
		padding-left:0.2cm;}	//增长箭头
</style>
</head>

<body>
<ol class="page">
	<li><a href="#" rel="prev">Prev</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#" rel="next">Next</a></li>
</ol>
</body

这里列表在使用浮动后将再也不占据文档流的空间，因此父列表标签会自动缩小从而父标签背景不可见。
因此在父标签增长属性overflow:hidden; 浏览器

另外在这里对CSS的一些坑作一些提示：缓存

1 百分比是以父标签来作参照的。学习

2 在IE中 text-align:center;是全部都居中，不仅仅是文本。 spa

3 IE6如下不支持margin:auto;

4 css规范同一属性不容许使用混合单位,可是不少浏览器都支持，不知道CSS怎么搞的。

5 由于层叠样式可能会发生样式的覆盖，形成样式失效，因此咱们推荐试用如下顺序
a:link{}未访问 a:visited{}访问过 a:hover{}悬停 a:focus{}用键盘链接到链接上 a:active{}单击时
另外例如按钮输入框表格均可以使用这些伪类标签。