用css3实现漂亮便签样式
web DIV+CSS 2019-03-21 3343 0
  1. 首页
  2. DIV+CSS
  3. 正文:用css3实现漂亮便签样式
关于本站

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

有需要网站维护，改版，病毒查杀，网站编辑，网站备案，html制作等相关的工作可以联系我。
本人有多年相关工作经验，也可提供免费咨询，交个朋友。
有需要探讨问题的朋友，也可以加我微信，共同探讨！
微信：15011482830 QQ:408917339

8288844 2698 39
分类目录
PHP 487
ThinkPHP 86
Mysql 66
jQuery 140
WampServer 15
DIV+CSS 113
DedeCMS 37
JavaScript 113
SQL 34
Sublime Text3 13
SQLServer 20
ASP 42
Bootstrap 18
IIS 25
AmazeUI 5
ThinkPHP5.1 259
Notepad++ 36
正则表达式 10
Layui 25
HTML标签 20
帝国cms 13
Linux 99
拼图Pintuer 6
Bootstrap4 19
kindeditor 11
HBuilderX 7
VSCode 62
微信开发 75
人人商城 15
Bootstrap5 33
宝塔 39
ThinkPHP6 72
百度小程序 5
Vue 140
Wordpress 20
Git 24
nodejs 31
React 5
zhtcms 3
其他 412
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (260)
Mysql (59)
DedeCms (33)
jQuery (74)
证件照 (1)
尺寸大小 (2)
背景颜色 (1)
setInc (4)
setDec (4)
onclick (5)
友情链接更多
超纯水设备
免费设计
海报设计
快递查询
CSS便签
打开边栏(ESC) 关闭边栏(ESC)

效果图如下：

from clipboard

代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Live Preview</title>
<style>
body {
    background: #f5f5f5;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    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) inset;
    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(-45deg,  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) inset;
    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%);
    background-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 .inset {
    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.inset {
    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.inset { 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.inset { 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.inset { 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, .tags .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>
    <br>
    <a href="#" class="tag-blue">淡蓝色</a><a href="#" class="tag-blue inset">淡蓝色文字</a>
    <br>
    <a href="#" class="tag-orange">橘黄色</a><a href="#" class="tag-orange inset">橘黄色文字</a>
    <br>
    <a href="#" class="tag-red">暗红色</a><a href="#" class="tag-red inset">暗红色文字</a>
    <br>
    <a href="#" class="tag-green">绿色</a>
    <br>
    <a href="#" class="tag-brown">棕色</a>
    <br>
    <a href="#" class="tag-gray">灰色</a>
    <br>
    <a href="#" class="tag-puple">紫色</a>
    <br>
    <a href="#" class="tag-fen">粉色</a>
    <br>
    <a href="#" class="tag-danlan">淡蓝</a>
</div>
</body>
</html>

版权声明：本篇文章来源于网络。 来源链接

前一篇

如何用CSS设置连接鼠标在上面是变成手型
后一篇

禁止手机网站点击图片弹出相册，图片浏览
相关推荐
CSS提示invalid property value
DIV+CSS | 2020-07-23 18750
网上复制了一段css代码，浏览器没有出现预定的样式，按F12打开调试模式，发现css属性前有个感叹号，鼠标经过提示“Invalid property value”无效的属性值，如图 应该是css有错误，后来发现css属性前的空格包含&emsp;“全角空格”，删了就可以了 复制空白粘贴到编辑器，然后切换到源...
CSS通过父元素选择子元素，选择第一个，第二个，最后一个，奇数偶数
DIV+CSS | 2017-07-27 8442
:first-child 选择器 选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式： p:first-child { background-color:yellow; } 例子1 选择列表中的第一个 <li> 元素并设置其样式： li:first-child { backgroun...
flex布局一行三个，显示多行
DIV+CSS | 2021-07-30 5520
text-align:justify;不起作用是怎么回事?
DIV+CSS | 2019-12-17 5430
CSS自动换行、强制不换行、强制断行、超出显示省略号，CSS显示两行
DIV+CSS | 2017-09-19 5049
CSS取消line-height设置line-height: normal;
DIV+CSS | 2021-10-19 4628
评论：0条
评论加载中...
发表评论
前一篇:
后一篇: