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

“最难不过坚持”

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

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

7439770 2655 39
分类目录
PHP 472
ThinkPHP 86
Mysql 65
jQuery 133
WampServer 15
DIV+CSS 112
DedeCMS 37
JavaScript 106
SQL 34
Sublime Text3 13
SQLServer 20
ASP 42
Bootstrap 18
IIS 25
AmazeUI 5
ThinkPHP5.1 243
Notepad++ 36
正则表达式 9
Layui 22
HTML标签 20
帝国cms 13
Linux 99
拼图Pintuer 6
Bootstrap4 19
kindeditor 11
HBuilderX 7
VSCode 61
微信开发 75
人人商城 15
Bootstrap5 33
宝塔 38
ThinkPHP6 72
百度小程序 5
Vue 124
Wordpress 20
Git 24
nodejs 28
React 5
zhtcms 3
其他 398
最新评论
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 (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
尺寸大小 (2)
背景颜色 (1)
setInc (4)
setDec (4)
onclick (5)
友情链接更多
超纯水设备
免费设计
海报设计
快递查询
CSS便签
打开边栏(ESC) 关闭边栏(ESC)

效果图如下：

from clipboard

代码如下： 

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