CSS

站长资源全栈工程师阅读(1167)评论(0)

在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，越来越多的前端开发者开始“返璞归真”，在能不使用图片的场景中减少...

站长资源全栈工程师阅读(1373)评论(0)

Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*...

站长资源全栈工程师阅读(1143)评论(0)

基于CSS的渐变与图片渐变相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE虽然可以...

站长资源全栈工程师阅读(1279)评论(0)

今天分享一个CSS3制作的翻牌效果，效果如下图所示，所过把把这个效果应用于相册肯定会很炫的。呵呵，超酷啊。 一、HTML代码： 因为是CSS3实现，所以大家可以看到没有任何的JS代码。ul为一组图片，每个li中有个a(因为我们希望点击图片可...

站长资源全栈工程师阅读(1127)评论(0)

代码如下： HTML： <div class="pie"></div> CSS： @keyframes spin { to{transform:rotate(.5turn);} } @keyframes bg { 5...

站长资源全栈工程师阅读(1135)评论(0)

HTML部分： <div class="cylinder"> <div class="side"></div> <div class="side"></div> <div c...

站长资源全栈工程师阅读(1144)评论(0)

代码如下： html部分: <div class="wrap"> <h3>文章标题</h3> <p>这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇...

站长资源全栈工程师阅读(1178)评论(0)

使用text-align:justify  使用justify-content:space-between 使用column(多列布局) 使用padding + box-sizing 假如有如下代码需要实现两端对齐： <di...

站长资源全栈工程师阅读(1300)评论(0)

如图： 代码如下： <a href="javascript:" class="btn btn-plus" role="button" title="增加"></a> <input value="1" size=...

站长资源全栈工程师阅读(1360)评论(0)

对于带边框的对话框我们一般我们用border属性生成两侧线框，然后CSS3 transform旋转，今天我们来使用渐变来实现 先上代码： <div class="content"> <p class="talk">这...