CSS小技巧

最新推荐文章于 2023-07-15 10:18:50 发布

charlene程程

最新推荐文章于 2023-07-15 10:18:50 发布

阅读量519

点赞数

分类专栏： css 文章标签： css 阴影渐变圆角边框链接

本文链接：https://blog.csdn.net/charlene0824/article/details/49718317

版权

css 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style type="text/css">
	.div1{
		margin:10px;
		width:400px;
		height:300px;
		background-color:#BDD738;
		float:left;
		/*background-color: green;*/

		/*分别在火狐和谷歌浏览器下实现渐变*/
		background-image:-moz-linear-gradient(left top, #BDD738, #7E9516);
    	background-image: -webkit-gradient(linear, left top,left bottom, from(#BDD738), to(#7E9516));
    	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#BDD738',endColorstr='#7E9516');
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#BDD738',endColorstr='#7E9516')";
    	background: -ms-linear-gradient(top, #BDD738, #7E9516);

    	/*分别在firefox webkit和css3中实现圆角*/
     	-moz-border-radius: 8px;
     	/*css3*/
     	border-radius: 8px;
     	/*webkit*/
  	 	-webkit-border-radius: 8px;

  	 	/*阴影效果*/
  	 	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  		-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  		/*IE6,IE7语法
  		filter:progid:DXImageTransform.Microsoft.Shadow(OffX=5, OffY=5, Color='gray');
 		 IE8语法
  		-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(OffX=5, OffY=5, Color='gray')";*/

  		/* For IE 8  测试效果不正确*/
		-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
		/* For IE 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

  		/*透明效果  IE8及其以下无作用*/
  		opacity: 0.4;
  		filter:alpha(opacity=40);

	}
	/*当鼠标悬停在div上时 透明度为1 */
	.div1:hover{
		opacity:1.0;
		filter:alpha(opacity=100);
	}
	.div2{
		width:200px;
		height: 180px;
		background-color: green;
	}
	.p3{
		font-weight: bold;/*使字体显示为加粗*/
		clear: both;/*表示框的两边不应该挨着浮动框*/
	}
	h1{
		/*标题框的左侧加入背景图像*/
		background-image: url("img/sousuo.png");
		background-position: left center;
		background-repeat: no-repeat;
		padding-left: 60px;
	}

	/*a :link,a:visited{
		text-decoration: none;
		color: blue;
		text-decoration: none;
		
	
	}
	a:visited{
		text-decoration: none;
		color: #666;
		text-decoration: none;
	
	}
	a:hover,a:focus,a:active{
		font-weight: none;
		color: red;
	
	} */

	.comment:target{
		background-color: yellow;
	}
	.external{
		background:url("img/externalLink.gif") no-repeat right top;
		padding-right: 10px;
	}

	/*突出显示所有外部链接*/
	a[href^="http:"]{
		background:url("img/externalLink.gif") no-repeat right top;
		padding:10px;
	}
	a[href^="http://yoursite.com"]{
		background-image:none;
		padding-right:0px;
	}
	/*对邮件链接进行突出显示*/
	a[href^="mailto:"]{
		background:url("img/mail.gif") no-repeat right top;
		padding-right:10px;
	}

	/*pixy实现翻转*/

	.another{
		display: block;
		width: 120px;
		text-decoration:none;
		border:1px solid #66a300;
		background-color:#8cca12;
		color:#fff;
		line-height: 1.4;/*使文本垂直居中*/
		background:url("img/buttons.png") -203px 0 no-repeat;
	}
	.another:hover, .another:focus{
		background-color:#f7a300;
		border-color: #ff7400;
		background-position: right top;
	}
	.another:active{
		background-position:left top;
	}

</style>
</head>

<body>
<div class="div1">

<div class="div2"></div>

</div>
<p >这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p>

<p  class="comment">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p>
<p class="p3">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p>
<p class="p3">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p>
<p><a class="external" href="#comment">这是一个链接</a></p>
<a class="another" href="#">这是另一个链接</a>
<h1>MY headline</h1>

</body>
</html>