基于CSS 属性实现按钮悬停边框和背景动画集合CSS 制作带边框背景色透明的消息框css3 边框、背景、文本效果的实现代码CSS3实现多背景模拟动态边框的效果CSS控制背景图像平铺实现边框阴影效果css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果css样式div或li在ie6下背景平铺及border边框断线解决技巧 CSS新特性:圆角边框多栏Gird布局背景设置css背景和边框标签实例详解

按钮一按钮二按钮三按钮四
按钮五按钮六按钮七按钮八
 *, *:before, *:after { transition: all 0.3s; } section { position: relative; padding: 5px 0 5px; text-align: center; } .btn { position: relative; display: inline-block; line-height: 35px; margin: 8px; padding: 0 15px; font-size: 15px; border-radius: 3px; opacity: .999; cursor: pointer; } .btn-border-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-o:before, .btn-border-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-o:before { left: 0; top: -1px; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-o:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-o:hover:before { width: 100%; } .btn-border-o:hover:after { height: 100%; } .btn-border-o.btn-green:before, .btn-border-o.btn-green:after { border-color: #2ecc71; } .btn-border-o.btn-green:hover { color: #2ecc71; } .btn-border { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border:before, .btn-border:after { position: absolute; content: ''; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border:before { top: -1px; left: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border:hover { background-color: transparent; } .btn-border:hover:before { width: 100%; } .btn-border:hover:after { height: 100%; } .btn-border.btn-blue:before, .btn-border.btn-blue:after { border-color: #3498db; } .btn-border.btn-blue:hover { color: #3498db; } .btn-border-rev-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-rev-o:before, .btn-border-rev-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev-o:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-rev-o:after { left: -1px; bottom: 0; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-rev-o:hover:before { width: 100%; } .btn-border-rev-o:hover:after { height: 100%; } .btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after { border-color: #9b59b6; } .btn-border-rev-o.btn-purple:hover { color: #9b59b6; } .btn-border-rev { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border-rev:before, .btn-border-rev:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; } .btn-border-rev:after { bottom: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; transition-delay: 0.05s; } .btn-border-rev:hover { background-color: transparent; } .btn-border-rev:hover:before { width: 100%; } .btn-border-rev:hover:after { height: 100%; } .btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after { border-color: #34495e; } .btn-border-rev.btn-navy:hover { color: #34495e; } .btn-fill-vert-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-vert-o:before, .btn-fill-vert-o:after { content: ''; position: absolute; left: 0; width: 100%; height: 0; opacity: 0; z-index: -1; } .btn-fill-vert-o:before { top: 50%; } .btn-fill-vert-o:after { bottom: 50%; } .btn-fill-vert-o:hover { color: #fff; } .btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after { height: 50%; opacity: 1; } .btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after { background-color: #e67e22; } .btn-fill-vert-o.btn-orange:hover { border-color: #e67e22; } .btn-fill-vert { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-vert:before, .btn-fill-vert:after { content: ''; position: absolute; width: 100%; height: 0; opacity: 0; left: 0; z-index: -1; } .btn-fill-vert:before { top: 50%; } .btn-fill-vert:after { bottom: 50%; } .btn-fill-vert:hover { color: #fff; } .btn-fill-vert:hover:before, .btn-fill-vert:hover:after { height: 50%; opacity: 1; } .btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after { background-color: #e74c3c; } .btn-fill-vert.btn-red:hover { border-color: #e74c3c; } .btn-fill-horz-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-horz-o:before, .btn-fill-horz-o:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz-o:before { left: 50%; } .btn-fill-horz-o:after { right: 50%; } .btn-fill-horz-o:hover { color: #fff; } .btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after { width: 50%; opacity: 1; } .btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after { background-color: #2ecc71; } .btn-fill-horz-o.btn-green:hover { border-color: #2ecc71; } .btn-fill-horz { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-horz:before, .btn-fill-horz:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz:before { left: 50%; } .btn-fill-horz:after { right: 50%; } .btn-fill-horz:hover { color: #fff; } .btn-fill-horz:hover:before, .btn-fill-horz:hover:after { width: 50%; opacity: 1; } .btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after { background-color: #3498db; } .btn-fill-horz.btn-blue:hover { border-color: #3498db; }