基于css3实现漂亮便签样式

更新时间:2023-04-03 15:40:27 阅读：评论：0

效果图如下：

代码如下：

复制代码代码如下:

<!doctype html>

<html>

<head>

<meta chart=”utf-8″>

<title>live preview</title>

<style>

body {

background: #f5f5f5;

font-family: arial, “helvetica neue”, helvetica, sans-rif;

font-size: 12px;

padding: 50px 0 10px 0;

}

.custom {

width: 260px;

margin: 0 auto;

}

.tags {

padding: 0;

}

.tags a {

background-image: -moz-linear-gradient(top, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.1) 99%, rgba(0,0,0,0.1) 100%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.12)), color-stop(99%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0.1)));

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: -o-linear-gradient(top, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: -ms-linear-gradient(top, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: linear-gradient(top, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#1fffffff’, endcolorstr=’#1a000000′,gradienttype=0 );

-webkit-border-top-right-radius: 3px;

-webkit-border-bottom-right-radius: 3px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 3px;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

box-shadow: 0 1px 0 rgba(255,255,255,0.5) int;

display: inline-block;

font-size: 12px;

font-weight: bold;

line-height: 25px;

height: 25px;

padding: 0 10px;

position: relative;

text-shadow: 0 1px 0 rgba(0,0,0,0.5);

text-decoration: none;

margin: 0 15px 5px 0;

border: 1px solid;

border-left: 0;

color: #fff;

}

.tags a:before {

background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.1) 99%, rgba(0,0,0,0.1) 100%);

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.12)), color-stop(99%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0.1)));

background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: -ms-linear-gradient(-45de五年级下册语文书人教版g, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

background-image: linear-gradient(-45deg, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#1fffffff’, endcolorstr=’#1a000000′,gradienttype=1 );

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

filter: progid:dximagetransform.microsoft.matrix(/* ie6–ie9 */ m11=0.7071067811865476, m12=-0.7071067811865475, m21=0.7071067811865475, m22=0.7071067811865476, sizingmethod=’auto expand’);

zoom: 1;

box-shadow: 1px 0px 0 rgba(255,255,255,0.5) int;

content: ”;

height: 18px;

left: -10px;

position: absolute;

top: 3px;

width: 18px;

z-index: -1;

border: 1px solid;

border-right: 0;

border-top: 0;

}

.tags a:after {

position: absolute;

background: #fff;

content: ”;

width: 5px;

height: 5px;

left: 0;

border-radius: 5px;

top: 9px;

border: 1px solid #888;

}

.tags a:hover {

background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.1) 100%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(0,0,0,0.1)));

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

background-image: -o-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

background-image: -ms-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

background-image: linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#40ffffff’, endcolorstr=’#1a000000′,gradienttype=0 );

}

.tags a:hover:before {

background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.1) 100%);

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(0,0,0,0.1)));

background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

backg邪恶漫画不知火舞全集round-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

background-image: linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#40ffffff’, endcolorstr=’#1a000000′,gradienttype=1 );

}

.tags a:active {

background-image: -moz-linear-gradient(top, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.12) 100%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.14)), color-stop(100%,rgba(255,255,255,0.12)));

background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: -o-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: -ms-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#24000000′, endcolorstr=’#1fffffff’,gradienttype=0 );

}

.tags a:active:before {

background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.12) 100%);

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.14)), color-stop(100%,rgba(255,255,255,0.12)));

background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

background-image: linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#24000000′, endcolorstr=’#1fffffff’,gradienttype=1 );

}

.tags .int {

color: rgba(0,0,0,0氧气密度.5);

text-shadow: 0 1px 0 rgba(255,255,255,0.5);

}

/* === customs ==========

================================================== */

.tags a, .tags a:before { background-color: #b7b7b7 }

.tags a, .tags a:after, .tags a:before { border-color: #777 }

.tags a.int {

color: #454545; /* here you can override the default rgba(0,0,0,0.5); */

}

.tags .tag-red, .tags .tag-red:before { background-color: #f25c48 }

.tags .tag-red, .tags .tag-red:after, .tags .tag-red:before { border-color: #bc4738 }

.tags .tag-red.int { color: #8a241e }

.tags .tag-blue, .tags .tag-blue:before { background-color: #0b9db7 }

.tags .tag-blue, .tags .tag-blue:after, .tags .tag-blue:before { border-color: #087184 }

.tags .tag-blue.int { color: #054854 }

.tags .tag-orange, .tags .tag-orange:before { background-color: #f28f1a }

.tags .tag-orange, .tags .tag-orange:after, .tags .tag-orange:before { border-color: #bb6e14 }

.tags .tag-orange.int { color: #7e4a0d }

.tags .tag-green, .tags .tag-green:before { background-color: #00a600 }

.tags .tag-green, .tags .tag-green:after, .tags .tag-green:before { border-color: #007500 }

.tags .tag-brown, .tags .tag-brown:before { background-color: #ae8f00 }

.tags .tag-brown, .tags .tag-brown:after, .tags .tag-brown:before { border-color: #5b4b00 }

.tags .tag-gray, .tags .tag-gray:before { background-color: #5b5b5b }

.tags .tag-gray, .tags .tag-gray:after, .tags .tag-gray:before { border-color: #272727 }

.tags .tag-puple, .tags .tag-puple:before { background-color: #6f00d2 }

.tags .tag-puple, .tags .tag-puple:after, .tags .tag-puple:before { border-color: #3a006f }

.tags .tag-fen, .tags .tag-fen:before { background-color: #ff00ff }

.tags .tag-fen, .tags .tag-fen:after, .tags .tag-fen:before { border-color: #460046 }

.tags .tag-danlan, .t韩国烤肉的做法ags .tag-danlan:before { background-color: #5cadad }

.tags .tag-danlan, .tags .tag-danlan:after, .tags .tag-danlan:before { border-color: #3d7878 }

</style>

</head>

<body>

<div class=”tags custom”>

<a href=”#”>默认</a>