css便签样式

最新推荐文章于 2023-03-13 13:27:09 发布
最新推荐文章于 2023-03-13 13:27:09 发布
阅读量136 收藏
点赞数
文章标签： css php 服务器 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijiawei111/article/details/131930083
版权

摘自网络：

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>live preview</title>
  6 <style>
  7 body {
  8 background: #f5f5f5;
  9 font-family: arial, "helvetica neue", helvetica, sans-serif;
 10 font-size: 12px;
 11 padding: 50px 0 10px 0;
 12 }
 13 .custom {
 14 width: 260px;
 15 margin: 0 auto;
 16 }
 17 .tags {
 18 padding: 0;
 19 }
 20 .tags a {
 21 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%);
 22 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)));
 23 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%);
 24 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%);
 25 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%);
 26 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%);
 27 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#1fffffff', endcolorstr='#1a000000',gradienttype=0 );
 28 -webkit-border-top-right-radius: 3px;
 29 -webkit-border-bottom-right-radius: 3px;
 30 -moz-border-radius-topright: 3px;
 31 -moz-border-radius-bottomright: 3px;
 32 border-top-right-radius: 3px;
 33 border-bottom-right-radius: 3px;
 34 box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
 35 display: inline-block;
 36 font-size: 12px;
 37 font-weight: bold;
 38 line-height: 25px;
 39 height: 25px;
 40 padding: 0 10px;
 41 position: relative;
 42 text-shadow: 0 1px 0 rgba(0,0,0,0.5);
 43 text-decoration: none;
 44 margin: 0 15px 5px 0;
 45 border: 1px solid;
 46 border-left: 0;
 47 color: #fff;
 48 }
 49 .tags a:before {
 50 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%);
 51 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)));
 52 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%);
 53 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%);
 54 background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.12) 0%,rgba(0,0,0,0.1) 99%,rgba(0,0,0,0.1) 100%);
 55 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%);
 56 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#1fffffff', endcolorstr='#1a000000',gradienttype=1 );
 57 -webkit-transform: rotate(45deg);
 58 -moz-transform: rotate(45deg);
 59 -ms-transform: rotate(45deg);
 60 -o-transform: rotate(45deg);
 61 transform: rotate(45deg);
 62 filter: progid:dximagetransform.microsoft.matrix(/* ie6–ie9 */ m11=0.7071067811865476, m12=-0.7071067811865475, m21=0.7071067811865475, m22=0.7071067811865476, sizingmethod='auto expand');
 63 zoom: 1;
 64 box-shadow: 1px 0px 0 rgba(255,255,255,0.5) inset;
 65 content: '';
 66 height: 18px;
 67 left: -10px;
 68 position: absolute;
 69 top: 3px;
 70 width: 18px;
 71 z-index: -1;
 72 border: 1px solid;
 73 border-right: 0;
 74 border-top: 0;
 75 }
 76 .tags a:after {
 77 position: absolute;
 78 background: #fff;
 79 content: '';
 80 width: 5px;
 81 height: 5px;
 82 left: 0;
 83 border-radius: 5px;
 84 top: 9px;
 85 border: 1px solid #888;
 86 }
 87 .tags a:hover {
 88 background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.1) 100%);
 89 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)));
 90 background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
 91 background-image: -o-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
 92 background-image: -ms-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
 93 background-image: linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
 94 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#40ffffff', endcolorstr='#1a000000',gradienttype=0 );
 95 }
 96 .tags a:hover:before {
 97 background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.1) 100%);
 98 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)));
 99 background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
100 background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
101 background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
102 background-image: linear-gradient(-45deg, rgba(255,255,255,0.25) 0%,rgba(0,0,0,0.1) 100%);
103 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#40ffffff', endcolorstr='#1a000000',gradienttype=1 );
104 }
105 .tags a:active {
106 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.12) 100%);
107 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)));
108 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
109 background-image: -o-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
110 background-image: -ms-linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
111 background-image: linear-gradient(top, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
112 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#24000000', endcolorstr='#1fffffff',gradienttype=0 );
113 }
114 .tags a:active:before {
115 background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%, rgba(255,255,255,0.12) 100%);
116 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)));
117 background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
118 background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
119 background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
120 background-image: linear-gradient(-45deg, rgba(0,0,0,0.14) 0%,rgba(255,255,255,0.12) 100%);
121 filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#24000000', endcolorstr='#1fffffff',gradienttype=1 );
122 }
123 .tags .inset {
124 color: rgba(0,0,0,0.5);
125 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
126 }
127 /* === customs ==========
128 ================================================== */
129 .tags a, .tags a:before { background-color: #b7b7b7 }
130 .tags a, .tags a:after, .tags a:before { border-color: #777 }
131 .tags a.inset {
132 color: #454545; /* here you can override the default rgba(0,0,0,0.5); */
133 }
134 .tags .tag-red, .tags .tag-red:before { background-color: #f25c48 }
135 .tags .tag-red, .tags .tag-red:after, .tags .tag-red:before { border-color: #bc4738 }
136 .tags .tag-red.inset { color: #8a241e }
137 .tags .tag-blue, .tags .tag-blue:before { background-color: #0b9db7 }
138 .tags .tag-blue, .tags .tag-blue:after, .tags .tag-blue:before { border-color: #087184 }
139 .tags .tag-blue.inset { color: #054854 }
140 .tags .tag-orange, .tags .tag-orange:before { background-color: #f28f1a }
141 .tags .tag-orange, .tags .tag-orange:after, .tags .tag-orange:before { border-color: #bb6e14 }
142 .tags .tag-orange.inset { color: #7e4a0d }
143 .tags .tag-green, .tags .tag-green:before { background-color: #00a600 }
144 .tags .tag-green, .tags .tag-green:after, .tags .tag-green:before { border-color: #007500 }
145 .tags .tag-brown, .tags .tag-brown:before { background-color: #ae8f00 }
146 .tags .tag-brown, .tags .tag-brown:after, .tags .tag-brown:before { border-color: #5b4b00 }
147 .tags .tag-gray, .tags .tag-gray:before { background-color: #5b5b5b }
148 .tags .tag-gray, .tags .tag-gray:after, .tags .tag-gray:before { border-color: #272727 }
149 .tags .tag-puple, .tags .tag-puple:before { background-color: #6f00d2 }
150 .tags .tag-puple, .tags .tag-puple:after, .tags .tag-puple:before { border-color: #3a006f }
151 .tags .tag-fen, .tags .tag-fen:before { background-color: #ff00ff }
152 .tags .tag-fen, .tags .tag-fen:after, .tags .tag-fen:before { border-color: #460046 }
153 .tags .tag-danlan, .tags .tag-danlan:before { background-color: #5cadad }
154 .tags .tag-danlan, .tags .tag-danlan:after, .tags .tag-danlan:before { border-color: #3d7878 }
155 </style>
156 </head>
157 <body>
158 <div class="tags custom">
159 <a >默认</a>
160 
161 <a class="tag-blue">淡蓝色</a><a class="tag-blue inset">淡蓝色文字</a>
162 
163 <a class="tag-orange">橘黄色</a><a class="tag-orange inset">橘黄色文字</a>
164 
165 <a class="tag-red">暗红色</a><a class="tag-red inset">暗红色文字</a>
166 
167 <a class="tag-green">绿色</a>
168 
169 <a class="tag-brown">棕色</a>
170 
171 <a class="tag-gray">灰色</a>
172 
173 <a class="tag-puple">紫色</a>
174 
175 <a class="tag-fen">粉色</a>
176 
177 <a class="tag-danlan">淡蓝</a>
178 </div>​
179 </body>
180 </html>
lijwsunyt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+css3日历便签样式特效.zip
10-09
非常实用的特效代码，可以完美运行，可以二次修改！
基于css3实现漂亮便签样式
09-25
便签样式依然是脱离图片采用css3实现，效果依然不亚于传统模式，接下来为大家详细介绍下实现方法，感兴趣的你可不要错过了哈，希望本文对你学习css3有所帮助
前端学习第八弹：制作一个精美书签
想不出一个好的标题，就用这个吧
11-04 4080
我不知道这个标题是不是有点名不副实，可以把它称之为书签吧，或者精美封面。。 本次主要练手的是边框效果，主要体现在上边框的分离与拼接，上代码吧： body{font-family:"FangSong";background:#ddd;} p{ margin:20px auto 40px auto; width:50%;
【css+js】彩色书签
KatyLight的博客
07-21 462
唯美彩色的书签
css 实现类似长纸条折叠的效果
qq_41046662的博客
10-15 548
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
CSS3别针纸便签样式代码
ICode联盟
02-04 218
CSS3别针纸便签样式代码。
用css border画三角形before after气泡三角
qq_28134589的博客
06-01 246
border 三角 div{ display:inline-block; width:0; height:0; border:10px solid; border-color:red green blue yellow; } 气泡三角 1 div叠加 通过div模拟before after实现，不如 before after方便 2 brfore after #demo{ width:100px; height:100px; border:2px solid #0
CSS特效三：简单的便签效果
githubcurry
11-30 1667
今天是来实现一个很实用，很炫酷的便签效果。写一个放到自己的网站上肯定增光不少。实现的效果如下 鼠标放到便签上之前： 鼠标放上去之后： 实现思路如下： 写好一个div，这个div包含了4个a标签，设置a标签的left: -80px;,这样a标签就会隐藏起来。 然后设置a的hover效果为left: 0;,想更加炫酷的小伙伴也可以加一点transform效果。 最后附上源码： <!DOCTYPE html> <html lang="en"> <head> .
css3做的好看的小便签,纯CSS3 便签条折角效果
weixin_36473057的博客
08-04 626
CSS语言：CSSSCSS确定html,body {padding: 0;margin: 0;font: 1em/1.4 Cambria, Georgia, sans-serif;color: #333;background: #fff;}header,hgroup {display: block;}a:link,a:visited {border-bottom: 1px solid #c5550...
纯css实现内凹圆角-书签笔记本模式
weixin_39370315的博客
03-09 997
纯css实现内凹圆角，不定时更新不同设计版本模式代码
HTML5+CSS3实现便签效果(倾斜+动画)
04-28
HTML5+CSS3五步实现便签效果，包含倾斜和动画特效
Qt css样式大全+详细书签pdf.zip
12-05
Qt css样式大全+详细书签pdf
10款很棒的菜单CSS样式
05-12
10款很不错的CSS样式，非常好用…… 自带图片资源，可以随意修改。
利用CSS实现书签效果实例
12-13
实现的效果图如下： 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border制作书签（图形）</title> <style> .div2:before { /*做一个书签效果*/ position: absolute; /*必须*/ top: 50px; left: 20px; z-index:
js+css3日历便签样式特效
07-24
本主题“js+css3日历便签样式特效”着重于利用这两种技术来创建一个全屏的日历便签界面，带有图片背景、年月日星期的信息展示。这种特效可以提升用户界面的吸引力，使网页更加生动有趣。 首先，我们来详细了解一下...
CSS3别针纸网页便签纸特效
07-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验。本项目“CSS3别针纸网页便签纸特效”正是利用了CSS3的特性，来创建一种模仿真实生活中别针固定在纸张上的网页提示效果。这种设计...
html css 书签,CSS3 包裹式书签栏
weixin_35853254的博客
06-10 395
CSS语言：CSSSCSS确定h1 {font-size: 5vw;text-shadow: 1px 1px 0 #f8fdff, 2px 2px 0 rgba(29, 37, 40, 0.1);color: #fa4248;font-weight: 900;line-height: 95%;}@media screen and (max-width: 640px) {h1 {font-size:...
书签制作css
lilongwei4321的博客
10-15 3705
1、使用渐变，效果如图 &lt;div class="bg"&gt;&lt;span&gt;我是标签&lt;/span&gt;&lt;/div&gt; &lt;style&gt; .bg{ width: 115px; line-height: 50px; background: red; background: linear-gr...
CSS 鼠标拖拽便签
Gwenh2的博客
03-13 176
一个可拖拽、写文字内容的“便签条”，主要使用resize和伪类::-webkit-resizer、::-webkit-scrollbar实现。
用html和js和css做一个功能齐全的网页便签
最新发布
05-20
2. 在CSS中设置div元素的样式，例如设置它的大小、位置、背景颜色等。 3. 使用JavaScript来实现便签的添加、删除和编辑等功能。例如，使用事件监听器来检测用户的鼠标点击事件，并在相应的位置创建新的便签。另外，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值