制作分享按钮

最新推荐文章于 2024-12-26 17:01:35 发布

原创最新推荐文章于 2024-12-26 17:01:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

css&css3 专栏收录该内容

30 篇文章

订阅专栏

本文深入探讨了CSS3与HTML5的结合应用，通过实例展示了如何利用:before和:after伪元素以及线性渐变等特性，实现网页布局与美化。文章详细介绍了各个元素的CSS样式设置，包括Facebook、Twitter等社交分享按钮的设计，以及Flickr、Delicious等链接的样式调整，旨在帮助开发者提升网页交互性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<div class="article">
  <h3>目的</h3>
  <p>再次领会了CSS3的强大，充分利用:before和:after两个方法，同时中间还涉及到了线性渐变。</p>
</div>
<ul>
  <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
  <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
  <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
  <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
  <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
  <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
  <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
  <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
  <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
  <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
  <li class="google-plus"><a href="#non" title="Add to google+">Google+</a></li>
  <li class="yahoo"><a href="#non" title="Add to yahoo">Yahoo</a></li>
  <li class="tumblr"><a href="#non" title="Add to tumblr">Tumblr</a></li>
</ul>

CSS

body {
	padding:0;
	margin:0 auto;
	width:1001px;
	font:1em/1.4 Cambria, Georgia, sans-serif;
	color:#333;
	background:#fff;
}
.article h3 {
		font-size:18px;
		font-weight:bold;
		color:#51B148;
	}
	.article p {
		
}
ul {
		list-style:none;
		padding:0;
		margin:0;
		overflow:hidden;
		font:0.875em/1 Arial, sans-serif;
	}
	ul li {
		float:left;
		width:66px;
		height:66px;
		margin:20px 20px 0 0;
	}
	ul li a {
		display:block;
		width:64px;
		height:64px;
		overflow:hidden;
		border:1px solid transparent;
		line-height:64px;
		text-align:center;
		text-decoration:none;
		border-radius:5px;
		position:relative;
		text-transform:lowercase;
		box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
	}
	ul li a:hover, ul li a:focus, ul li a:active {
	opacity:0.8;
}
.facebook a {
	border-color: #3c5a98;
	text-indent:34px;
	letter-spacing:10px;
	font-weight: bold;
	font-size: 64px;
	line-height: 66px;
	color: #fff;
	background: #3c5a98;
	box-shadow:0 0 4px rgba(0, 0, 0, 0.4);
}
.twitter a {
	border-color:#a8eaec;
	text-indent: 20px;
	letter-spacing: 40px;
	font: bold 60px/1 Tahoma, sans-serif;
	line-height: 60px;
	background: #daf6f7;
	text-shadow:3px 3px 1px #fff,-3px -3px 1px #fff,3px -3px 1px #fff,-3px 3px 1px #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6)); /*老版*/
	background-image: -webkit-linear-gradient(top, #dbf7f8, #88e1e6);
	background-image: -moz-linear-gradient(top, #dbf7f8, #88e1e6);
	background-image: -o-linear-gradient(top, #dbf7f8, #88e1e6);
	background-image: -ms-linear-gradient(top, #dbf7f8, #88e1e6);
	background-image: linear-gradient(top, #dbf7f8, #88e1e6);
	color: #76ddf8;
}
.rss a {
		width:60px;
		padding: 0 2px;
		border-color: #ea6635;
		text-indent:-186px;
		font-size: 64px;
		font-weight: bold;
		background: #e36443;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
		background-image: -webkit-linear-gradient(top, #f19242, #e36443);
		background-image: -moz-linear-gradient(top, #f19242, #e36443);
		background-image: -o-linear-gradient(top, #f19242, #e36443);
		background-image: -ms-linear-gradient(top, #f19242, #e36443);
		background-image: linear-gradient(top, #f19242, #e36443);
	}/*圆点*/
	.rss a:before {
		 content:"";
		 position: absolute;
		 bottom:10px;
		 left: 10px;
		 width: 12px;
		 height: 12px;
		 background: #fff;
		 border-radius:12px;
}
	/*弧形*/
    .rss a:after {
		 content:"";
		 position:absolute;
		 bottom: 10px;
		 left: 10px;
		 height: 22px;
		 width: 22px;
		 border:24px double #fff;
		 border-width:24px 24px 0 0;
		 border-radius:0 50px 0 0;
}
.flickr a {
	border-color:#d2d2d2;
	text-indent:-9000px;
	font-size:108px;
	font-weight:bold;
	color:#fff;
	background:#fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
	background-image:-webkit-linear-gradient(top, #fff, #d2d2d2);
	background-image:-moz-linear-gradient(top, #fff, #d2d2d2);
	background-image:-o-linear-gradient(top, #fff, #d2d2d2);
	background-image:-ms-linear-gradient(top, #fff, #d2d2d2);
	background-image:linear-gradient(top, #fff, #d2d2d2);
	}
	/*蓝色圆点*/
    .flickr a:before,.flickr a:after{
		content:"";
		 position:absolute;
		 top:50%;
		 width:20px;
		 height:20px;
		 border-radius: 20px;
	}
	.flickr a:before {
		 left:30%;
		 margin:-10px 0 0 -10px;
		 background:#085ec5;
		 border:1px solid #003c84;
		 background-image:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));
		 background-image:-webkit-linear-gradient(top, #005cc6, #003d83);
		 background-image:-moz-linear-gradient(top, #005cc6, #003d83);
		 background-image:-o-linear-gradient(top, #005cc6, #003d83);
		 background-image:-ms-linear-gradient(top, #005cc6, #003d83);
		 background-image:linear-gradient(top, #005cc6, #003d83);
	}
	/*红色圆点*/
    .flickr a:after {
		 right:30%;
		 margin:-10px -10px 0 0;
		 border:1px solid #ba0060;
		 background:#fd1e93;
		 background-image:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));
		 background-image:-moz-linear-gradient(top, #fd1e93, #cb026c);
		 background-image: -webkit-linear-gradient(top, #fd1e93, #cb026c);
		 background-image: -o-linear-gradient(top, #fd1e93, #cb026c);
		 background-image: -ms-linear-gradient(top, #fd1e93, #cb026c);
		 background-image: linear-gradient(top, #fd1e93, #cb026c);
}
.delicious a {
	border-color:#d2d2d2;    
	text-align:center;
	text-indent:-9000px;
	font-size:108px;
	font-weight:bold;
	color:#fff;
	background:#fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d1d1d1));
	background-image:-webkit-linear-gradient(top, #fff, #d1d1d1);
	background-image:-moz-linear-gradient(top, #fff, #d1d1d1);
	background-image:-o-linear-gradient(top, #fff, #d1d1d1);
	background-image:-ms-linear-gradient(top, #fff, #d1d1d1);
	background-image:linear-gradient(top, #fff, #d1d1d1);
	}
	/*右上角蓝色方块*/
	.delicious a:before {
		content:"";
		position:absolute;
		top:0;
		right:0;
		width:30px;
		height:30px;
		border:1px solid #0060ce;
		background:#085ec5;
		border-radius:0 4px 0 0;
		background-images:-webkit-gradient(linear, left top, left bottom, from(#0060ce)), to(#003b7f));
		background-images:-webkit-linear-gradient(top, #0060ce, #003b7f);
		background-images:-moz-linear-gradient(top, #0060ce, #003b7f);
		background-images:-o-linear-gradient(top, #0060ce, #003b7f);
		background-images:-ms-linear-gradient(top, #0060ce, #003b7f);
		background-images:linear-gradient(top, #0060ce, #003b7f);
	}
	/*左下角黑色方块*/
	.delicious a:after {
		content:"";
		position:absolute;
		bottom:0;
		left:0;
		width:30px;
		height:30px;
		border:1px solid #000;
		background:#000;
		border-radius: 0 0 0 4px;
		background-image:-webkit-gradient(linear, left top, left bottom, from(#212121), to(#000));
		background-image:-webkit-linear-gradient(top, #212121, #000);
		background-image:-moz-linear-gradient(top, #212121, #000);
		background-image:-o-linear-gradient(top, #212121, #000);
		background-image:-ms-linear-gradient(top, #212121, #000);
		background-image:linear-gradient(top, #212121, #000);
}
.linkedin a {
	width:60px;
	overflow:hidden;
	padding:0 2px;
	border-color:#185c80;
	text-indent:-185px;
	font-size:64px;
	font-weight:bold;
	color:#fff;
	background:#0c6596;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#5babcb), to(#0c6596));
	background-image:-webkit-linear-gradient(top, #5babcb, #0c6596);
	background-image:-moz-linear-gradient(top, #5babcb, #0c6596);
	background-image:-ms-linear-gradient(top, #5babcb, #0c6596);
	background-image:-o-linear-gradient(top, #5babcb, #0c6596);
	background-image:linear-gradient(top, #5babcb, #0c6596);
}
.google a {
	border-color:#26478d;
	text-indent:16px;
	letter-spacing:40px;
	font: 65px/44px Georgia, Times New Roman, Times, serif;
	color:#fff;
	background:#1e3c7f;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#447aec), to(#1e3c7f));
	background-image:-webkit-linear-gradient(top, #447aec, #1e3c7f);
	background-image:-moz-linear-gradient(top, #447aec, #1e3c7f);
	background-image:-o-linear-gradient(top, #447aec, #1e3c7f);
	background-image:-ms-linear-gradient(top, #447aec, #1e3c7f);
	background-image:linear-gradient(top, #447aec, #1e3c7f);
}
.orkut a {
	border-color:#b4c4dd;
	background:#fff;
	font-size:108px;
	color:#b62b91;
	text-indent:-9000px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ceddf6));
	background-image:-webkit-linear-gradient(top, #fff, #ceddf6);
	background-image:-moz-linear-gradient(top, #fff, #ceddf6);
	background-image:-o-linear-gradient(top, #fff, #ceddf6);
	background-image:-ms-linear-gradient(top, #fff, #ceddf6);
	background-image:linear-gradient(top, #fff, #ceddf6);
	}
	/*粉红色圆*/
	.orkut a:before {
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:40px;
		height:40px;
		border:1px solid #b0699e;
		margin:-21px 0 0 -21px;
		background:#d779c0;
		border-radius:40px;
		box-shadow:0 0 2px rgba(0,0,0,0.6);
	}
	/*白色圆*/
	.orkut a::after {
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:26px;
		height:26px;
		margin:-13px 0 0 -13px;
		background:#fff;
		border-radius:26px;
		box-shadow: 0 0 2px rgba(0,0,0,0.6);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#eff4fc), to(#dce6f8));
		background-image:-webkit-linear-gradient(top, #eff4fc, #dce6f8);
		background-image:-moz-linear-gradient(top, #eff4fc, #dce6f8);
		background-image:-o-linear-gradient(top, #eff4fc, #dce6f8);
		background-image:-ms-linear-gradient(top, #eff4fc, #dce6f8);
		background-image:linear-gradient(top, #eff4fc, #dce6f8);
}
.technorati a {
	border-color:#266F12;
	background:#086B04;
	text-indent:-9000px;
	font-size:108px;
	color:#b62b91;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#a3d679), to(#086b04));
	background-image:-webkit-linear-gradient(top, #a3d679, #086b04);
	background-image:-moz-linear-gradient(top, #a3d679, #086b04);
	background-image:-o-linear-gradient(top, #a3d679, #086b04);
	background-image:-ms-linear-gradient(top, #a3d679, #086b04);
	background-image:linear-gradient(top, #a3d679, #086b04);
	}
	/*白色圆*/
	.technorati a:before {
		content:"";
		position:absolute;
		top:5px;
		right:-5px;
		width:40px;
		height:25px;
		border:8px solid #f5f5f5;
		border-radius:45px / 35px;
		z-index:9;
	}
	/*白色三角*/
	.technorati a:after {
		content:"";
		position:absolute;
		top:40px;
		left:20px;
		width:0;
		height:0;
		border-width:0 0 18px 13px;
		border-style:solid;
		border-color:transparent #f5f5f5;
}
.netvibes a {
	border-color:#0c5f0c;
	background:#138210;
	text-align:center;
	font-size: 178px;
	font-weight:bold;
	color:#fff;
	text-indent:-9000px;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#68db21), to(#138210));
	background-image:-webkit-linear-gradient(top, #68db21, #138210);
	background-image:-moz-linear-gradient(top, #68db21, #138210);
	background-image:-o-linear-gradient(top, #68db21, #138210);
	background-image:-ms-linear-gradient(top, #68db21, #138210);
	background-image:linear-gradient(top, #68db21, #138210);
	}
	/*白色+号*/
	.netvibes a:before {
		content:"+";
		position:absolute;
		left:1px;
		top:0;
		width:64px;
		text-indent:0;
		text-align:center;    
		font-size:88px;
		color:#fff;
}
.google-plus a {
	border-color:#C4695F;
	background:#1e3c7f;
	text-indent:-5px;
	letter-spacing:40px;
	font: 96px/31px Georgia, Times New Roman, Times, serif;
	color:#fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#D43D2A), to(#A92B1D));
	background-image:-webkit-linear-gradient(top, #D43D2A, #A92B1D);
	background-image:-moz-linear-gradient(top, #D43D2A, #A92B1D);
	background-image:-o-linear-gradient(top, #D43D2A, #A92B1D);
	background-image:-ms-linear-gradient(top, #D43D2A, #A92B1D);
	background-image:linear-gradient(top, #D43D2A, #A92B1D);
	}
	/*右边+号*/
	.google-plus a:before {
		content: "+";
		font-size:46px;
		left:43px;
		position: absolute;
		top:-6px;
}
.yahoo a {
	border-color:#971278;
	background:#1e3c7f;
	text-transform:uppercase;
	text-indent:3px;
	letter-spacing:40px;
	font: 65px/66px Georgia, Times New Roman, Times, serif;
	color:#fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#C639C2), to(#9E2999));
	background-image:-webkit-linear-gradient(top, #C639C2, #9E2999);
	background-image:-moz-linear-gradient(top, #C639C2, #9E2999);
	background-image:-o-linear-gradient(top, #C639C2, #9E2999);
	background-image:-ms-linear-gradient(top, #C639C2, #9E2999);
	background-image:linear-gradient(top, #C639C2, #9E2999);
	}
	/*右边！号*/
	.yahoo a:before {
		content: "!";
		font-family: Arial;
		left: 34px;
		position: absolute;
		top: 7px;
		-moz-transform:rotate(18deg);
		-webkit-transform:rotate(18deg);
		-ms-transform: rotate(18deg);
		-o-transform: rotate(18deg);
		transform: rotate(18deg);
}
.tumblr a {
	border-color: #425B6E;
	text-indent: 24px;
	letter-spacing: 40px;
	font:  60px/1 Tahoma,sans-serif;
	line-height: 60px;
	background: #daf6f7;
	text-shadow: 1px 0px 1px #FFFFFF, -2px -1px 1px #FFFFFF, 0px -1px 1px #FFFFFF, -2px -1px 1px #FFFFFF;
	background-image: -webkit-gradient(linear, left top,left bottom,from(#29486A),to(#253F5B));
	background-image: -webkit-linear-gradient(top,#29486A,#253F5B);
	background-image: -moz-linear-gradient(top,#29486A,#253F5B);
	background-image: -o-linear-gradient(top,#29486A,#253F5B);
	background-image: -ms-linear-gradient(top,#29486A,#253F5B);
	background-image: linear-gradient(top,#29486A,#253F5B);
	color: #fff;
}