精华内容
下载资源
问答
  • CSS按钮背景渐变

    千次阅读 2018-04-01 18:43:44
    CSS按钮背景渐变 要实现当鼠标放到按钮上时,背景色和字体色渐渐变成另一种颜色,离开时又变成另一种颜色。只需用transition属性就行了。 .button{ margin: 20px auto; line-height: 50px; width: 150px; ...

    CSS按钮背景渐变

    要实现当鼠标放到按钮上时,背景色和字体色渐渐变成另一种颜色,离开时又变成另一种颜色。只需用transition属性就行了。

    .button{
        margin: 20px auto;
        line-height: 50px;
        width: 150px;
        height: 50px;
        display: block;
        text-decoration: none;
        font-weight: 100;
        font-size: 20px;
        border-radius: 5px;
        color: #B4B4B5;
        background: #333337;
        text-align: center;
        transition: all 900ms;
    }
    
    .button:hover{  
        background:#434346;
        color: #F0F0F0;
    }
    展开全文
  • CSS背景色渐变(图例) 项目中需要做个渐变色图例,刚看到这个效果我是拒绝的,一张图片解决他不香吗?奈何强迫症犯了就用css写了,看效果图(主要难搞的是下面得半截白线)。 直接上代码 html <div class=...

    CSS背景色渐变(图例)

    项目中需要做个渐变色图例,刚看到这个效果我是拒绝的,一张图片解决他不香吗?奈何强迫症犯了就用css写了,看效果图(主要难搞的是下面得半截白线)。
    在这里插入图片描述

    直接上代码

    html
    	<div class="legendPara">
            <div class="legendParabox">
                <ul class="clearfix">
                    <li></li>
                    <li></li>
                    <li class="mr"></li>
                </ul>
                <p>
                    <s>0</s>
                    <s>0.3</s>
                    <s>0.8</s>
                    <s>2</s>
                </p>
            </div>
        </div>
    
    css
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	li{
    		list-style: none;
    	}
    	s{
    		text-decoration: none;
    	}
    	.legendPara{
    		width: 282px;
    	    padding: 10px;
    	    height: 43px;
    	    display: flex;
    	    align-items: center;
    	    background: rgba(0,0,0,0.3);
    	}
    
    	.legendPara ul{
    	    width: 278px;
    	    height: 23px;
    	    padding: 1px;
    	    background: linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
    	    background: -ms-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
    	    background: -webkit-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
    	    background: -moz-linear-gradient(top, transparent 80%, #fff 80%, #fff 100%);
    	}
    	.legendPara ul li{
    	    float: left;
    	    width: 92px;
    	    height: 23px;
    	    background: pink;
    	    margin-right: 1px;
    	    border: 1px solid #091220;
    	    border-top: 1px solid #091220;
    	    border-bottom: 1px solid #091220;
    	    box-sizing: border-box;
    	}
    	.legendPara ul li:nth-child(1){
    	    background: linear-gradient(left, #00D9E1, #00FF12);
    	    background: -ms-linear-gradient(left, #00D9E1, #00FF12);
    	    background: -webkit-linear-gradient(left, #00D9E1, #00FF12);
    	    background: -moz-linear-gradient(left, #00D9E1, #00FF12);
    	    border-left: 1px solid #091220;
    	}
    	.legendPara ul li:nth-child(2){
    	    background: linear-gradient(left, #fefe23, #FF9600);
    	    background: -ms-linear-gradient(left, #fefe23, #FF9600);
    	    background: -webkit-linear-gradient(left, #fefe23, #FF9600);
    	    background: -moz-linear-gradient(left, #fefe23, #FF9600 );
    	}
    	.legendPara ul li:nth-child(3){
    	    background: linear-gradient(left, #ff1b1b, #950101);
    	    background: -ms-linear-gradient(left, #ff1b1b, #950101);
    	    background: -webkit-linear-gradient(left, #ff1b1b, #950101);
    	    background: -moz-linear-gradient(left, #ff1b1b, #950101);
    	    border-right: 1px solid #091220;
    	    margin-right: 0;
    	}
    	.legendPara p{
    	    display: block;
    	}
    	.legendPara p s{
    	    font-size: 12px;
    	    line-height: 16px;
    	    margin-right: 72px ;
    	}
    	.legendPara p s:nth-last-child(1){
    	    margin-right: 0;
    	}	
    

    番外篇:
    没有营养的文章第二篇,万一一不小心对你有点启发,点个赞!谢谢了!~

    展开全文
  • 那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。 CSS3 径向渐变和线性渐变是很相似的,首先来看其...

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。

    CSS3 径向渐变和线性渐变是很相似的,首先来看其语法:

    -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
    -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

    除了你已经在线性渐变中看到的起始位置,方向和颜色,径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 颜色起止(Color stops):就像用线性渐变,你应该沿着渐变线定义渐变的起止颜色。

    做优惠券最主要的代码如下,就是这三句

    background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;

    不多解释直接上代码
    优惠券

    查看效果

    CSS代码

    这是公共样式
    .stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}
    .stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
    .stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
    .stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
    .stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
    .stamp .par p{color:#fff;}
    .stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
    .stamp .par .sign{font-size: 34px;}
    .stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
    .stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}
    .stamp .copy p{font-size: 16px;margin-top: 15px;}
    .stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;}
    .stamp01:before{background-color:#F39B00;}
    .stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
    .stamp02:before{background-color:#D24161;}
    .stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}
    .stamp03:before{background-color:#7EAB1E;}
    .stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
    .stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
    .stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}
    .stamp04{width: 390px;background: #50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;}
    .stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}
    .stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
    .stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
    .stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}

    HTML代码

    <div class="stamp stamp01">
    <div class="par"><p>XXXXXX折扣店</p><sub class="sign"></sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
    <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
    <i></i>
    </div>
    <div class="stamp stamp02">
    <div class="par"><p>XXXXXX折扣店</p><sub class="sign"></sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
    <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
    <i></i>
    </div>
    <div class="stamp stamp03">
    <div class="par"><p>XXXXXX折扣店</p><sub class="sign"></sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
    <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
    <i></i>
    </div>
    <div class="stamp stamp04">
    <div class="par"><p>XXXXXX折扣店</p><sub class="sign"></sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
    <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
    <i></i>
    </div>

     

    查看效果

    PS:用这个方式还可以做邮票,不信你试试

    方法二:

    目录(?)[+]

    我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。

    而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。

    比如你只是想调整下颜色、线条大小和倾斜的角度,你都得打开作图软件来折腾一下。

    现在我们可以使用CSS3伪元素及其背景渐变(gradient)来实现这一有趣而实用的效果。


    波浪线特征

    我们观察下波浪线,有这么2个基本几何特征:

    1. 波折线是重复的,可以被分解为若干相连的“角”形状

    2. 这些“角”的连接点处是平滑过渡的,不能出现毛刺,所以需要对顶点处做平滑处理


    对于(1),我们可以首先创建一个尖角形状(由一撇一捺2条短直线组成),然后使用x方向的repeat来重复。

    对于(2),我们可以使用渐变色,模拟人手划线时,在转弯处力道减弱,我们在尖角相交处使用相对淡色,构造出圆角的视觉感受。

    CSS3线性渐变

    我们注意到每个“角”都有2条边,如果以默认渐变轴(从上往下的一条垂直线)来看,左边的呈现45°倾斜,而右边的呈现315°倾斜。

    那么如何创建一个45°的倾斜线呢?我们很容易想到用rotate变换,但是rotate是作用于整个元素上的,在这里并不适用。

    我们换个思路,CSS3中的线性渐变(linear-gradient)可以完成上述要求,线性渐变的核心是渐变轴、起点终点和颜色值分布。

    通过设置渐变轴的角度为45°,我们可以得到倾斜的特性,然后我们再把渐变宽度缩窄到一个线条的大小,具体代码如下:

    [css]  view plain  copy
      在CODE上查看代码片 派生到我的代码片
    1. div {  
    2.   background: linear-gradient(45deg, transparenttransparent 45%redtransparent 55%transparent 100%);   
    3.   background-size20px 20px;  
    4.   background-repeatno-repeat;  
    5. }  

    上面linear-gradient方法中的第一个参数是渐变轴角度,渐变将沿渐变轴开展,也就是渐变线的角度为45°。

    后面的参数表示从0到45%的长度上为透明,45%到55%为红色渐变,55%到100%为透明。

    也就是只有元素背景长度的10%出现渐变色(且是两边对称),第二行代码把背景的宽度设置为20px,那么渐变线的实际宽度为10px*10%=2px。

    这样我们就得到了一根短折线,具备45°倾斜,且带渐变。

    类似的,我们可以得到一根315°的渐变短折线:

    [css]  view plain  copy
      在CODE上查看代码片 派生到我的代码片
    1. div {  
    2.   background: -webkit-linear-gradient(315deg, transparenttransparent 45%redtransparent 55%transparent 100%),-webkit-linear-gradient(45deg, transparenttransparent 45%redtransparent 55%transparent 100%);   
    3.   background-size20px 20px;  
    4.   background-repeatno-repeat;  
    5. }  

    但是现在我们得到的是2条交叉的线条,形成一个“X”形状,这并不是我们想要的。

    一个简单的技巧就是设置元素的高度为1/2,就得到了一个“V”形。

    然后,我们把background-repeat设置为repeat-x,就得到了波浪线形状。

    CSS3 :before伪元素

    我们还剩最后一步,我们需要把波浪线形状添加到文本下面,只要把上面的div元素改成对应文本的:before伪元素即可。

    我们还可以设置不同的渐变颜色用以标注不同的文本。

    你可以自己在线试试:http://wow.techbrood.com/fiddle/5868


    展开全文
  • display: none; position: absolute; top: 0; left: 0; } section:hover h3 { display: block; } .content { width: 150px; height: 150px; margin: 25px; } .item:nth-of-type(1) .content { /*线性渐变*/ ...

    /p>

    Document

    margin: 0;

    padding: 0;

    }

    .container {

    width: 1000px;

    margin: 0 auto;

    }

    header {

    text-align: center;

    line-height: 60px;

    }

    section {

    width: 200px;

    height: 200px;

    border: 2px solid #ddd;

    float: left;

    margin: 20px;

    border-radius: 10px;

    background: #fff;

    position: relative;

    }

    section h3 {

    width: 200px;

    height: 200px;

    text-align: center;

    line-height: 200px;

    color: blue;

    background: rgba(0, 0, 0, 0.1);

    border-radius: 10px;

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    }

    section:hover h3 {

    display: block;

    }

    .content {

    width: 150px;

    height: 150px;

    margin: 25px;

    }

    .item:nth-of-type(1) .content {

    /*线性渐变*/

    background-image: linear-gradient(yellow, red);

    }

    /*多个颜色线性渐变*/

    .item:nth-of-type(2) .content {

    background-image: linear-gradient(skyblue, yellow, pink, orange);

    }

    /*过渡线性渐变*/

    .item:nth-of-type(3) .content {

    background-image: linear-gradient(#aaa, #bbb, #ccc, #ddd, #eee, #fff);

    }

    .item:nth-of-type(4) .content {

    /*渐变方向默认从上到下 linear-gradient(1):从上到下; */

    background-image: linear-gradient(#abc, #afa, #af0);

    }

    .item:nth-of-type(5) .content {

    background-image: linear-gradient(45deg, #abc, #afa, #af0);

    }

    .item:nth-of-type(6) .content {

    background-image: linear-gradient(to right top, #abc, #afa, #af0);

    }

    .item:nth-of-type(7) .content {

    background-image: linear-gradient(90deg, #abc, #afa, #af0);

    }

    .item:nth-of-type(8) .content {

    background-image: linear-gradient(to right bottom, #abc, #afa, #af0);

    }

    .item:nth-of-type(9),

    .item:nth-of-type(9) h3 {

    width: 930px;

    }

    .item:nth-of-type(9) .content {

    background-image: linear-gradient(to right, #fff, #fff 10%, #000 10%, #000 20%, #fff 20%, #fff 30%, #000 30%, #000 40%, #fff 40%, #fff 50%, #000 50%, #000 60%, #fff 60%, #fff 70%, #000 70%, #000 80%, #fff 80%, #fff 90%, #000 90%, #000 100%);

    width: 880px;

    }

    .item:nth-of-type(10) .content {

    /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

    background-image: radial-gradient(100px at left top, #abc, #afa, #af0);

    }

    .item:nth-of-type(11) .content {

    /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

    background-image: radial-gradient(100px at 50px 100px, #abc, #afa, #af0);

    }

    .item:nth-of-type(12) .content {

    /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/

    background-image: radial-gradient(100px at 50px 100px, #abc 10%, #afa 80%, #af0);

    }

    .item:nth-of-type(13) .content {

    background-image: repeating-linear-gradient(to left, pink 10%, gray 30%);

    }

    .item:nth-of-type(14) .content {

    background-image: repeating-linear-gradient(to left, #000, #000 5%, #fff 5%, #fff 10%);

    }

    .item:nth-of-type(15) .content {

    background-image: repeating-radial-gradient(10px at center center, pink, pink 5%, gray 5%, gray 10%);

    }

    .item:nth-of-type(16) .content {

    background-image: repeating-radial-gradient(10px at center center, pink, gray);

    }

    .item:nth-of-type(17) .content {

    width: 120px;

    height: 60px;

    text-align: center;

    border-radius: 5px;

    font-family: “黑体”;

    color: #fff;

    line-height: 60px;

    margin-top: 60px;

    background: green;

    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

    /*background-image: linear-gradient(#007F00,#004000);*/

    }

    .item:nth-of-type(18) .content {

    border-radius: 50%;

    background: blue;

    background-image: radial-gradient(100px at 40px 40px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));

    /*background-image: radial-gradient(120px at 40px 40px,#0000FF,#000065);*/

    }

    .item:nth-of-type(19) .content {

    width: 150px;

    height: 50px;

    margin-top: 75px;

    background-image: repeating-linear-gradient(-45deg, #008000, #008000 14%, #FFFF00 14%, #FFFF00 25%);

    background-position: 0 0;

    }

    渐变

    线性渐变

    多个颜色线性渐变

    过渡线性渐变

    渐变方向(默认)

    渐变方向45度

    渐变方向右上

    渐变方向90度

    渐变方向右

    控制渐变(斑马线)

    径向渐变

    径向渐变圆心控制

    径向渐变颜色过渡控制

    重复线性渐变

    重复线性渐变(斑马线)

    重复径向渐变

    重复径向渐变

    立体按钮

    按钮

    立体球

    进度条

    展开全文
  • 119.css按钮边框渐变发光特效

    千次阅读 2020-12-17 08:54:06
    效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持... 【前端物资】119按钮边框渐变发光特效 视频地址一:https://www.bilibili.com/video/BV1rh
  • display: none; } /*动画效果*/ @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: .5; /*中间状态 透明度为0.5*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } ...
  • CSS语言:CSSSCSS确定body {margin: 0;padding: 0;}#gradients {width: 100%;height: 100%;}#gradients > ul {list-style: none;padding: 0;margin: 4px;}#gradients > ul > li {width: calc(33.3% - 3px);...
  • 那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。 CSS3 径向渐变和线性渐变是很相似的,首先来看其...
  • css3 渐变

    2020-10-20 17:26:58
    css3 渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
  • background: none; outline: 0; color: rgb(39, 170, 223); margin:80px 0; display: block; width: 100%; padding: 5px 0; border-bottom:1px solid rgb(84, 192, 235); transition: 0.2S; font-size: 30px; } ...
  • CSS 网页文字渐变效果

    2013-05-24 10:25:33
    这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空&lt;span&gt;标签,它使用背景图片和position:absolute属性...
  • none ; } #nav ul li { width : 80 px ; height : 30 px ; background-color : #FFD700 ; float : left ; line-height : 30 px ; text-align : center ; } #nav ul li a { text-...
  • CSS实现文本渐变效果

    2008-03-07 17:17:00
    你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得...
  • <!DOCTYPE html> <html> <head> <title>Crayon Animate</title>...style type="text/css"> body { background-color: #747474; } .yam-don-button { width: ...
  • CSS实现文本渐变效果

    2008-07-09 08:46:00
    你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得...
  • html+css实现彩色渐变滑动条

    千次阅读 2019-09-07 21:26:37
    display: inline-block; width: 305px; height: 6px; position: relative; border-radius: 5px; } /* 滑条划过的宽度,默认值为0 */ .slider-panel .slider-box .slider-value { background-...
  • 利用css盒阴影,css渐变、font-awesome,HTML定位流等css知识配合HTML和css的基础知识,完成书城界面的搭建。 一、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
  • CSS3渐变色按钮

    2015-04-01 09:12:12
    上一篇文章介绍了css3的渐变色属性,今天带来CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,...
  • css border 渐变Not too long ago, adding decorative elements like fancy borders to a web page involved slicing images and patiently tweaking away at the CSS until it looked just right. 不久之前,在...
  • CSS语言:CSSSCSS确定body {text-align: center;margin: 7rem auto;background: #222;}.btn {-webkit-appearance: none;border: 0;/* styles */outline: 0;position: relative;background: -webkit-linear-gradient...
  • css渐变颜色

    2020-09-17 16:51:58
    转载: ...depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-..
  • css按钮渐变

    2014-10-24 09:45:00
    CSS3渐变色按钮 转自:http://www.cinner.name/article/6.aspx  CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充...
  • CSS3渐变色按钮

    2013-03-28 13:54:53
    上一篇文章介绍了css3的渐变色属性,今天带来CSS3渐变特性的应用。可以去看一组按钮,我只用了 CSS创建完成的渐变按钮(不需要图片和Javascript)。 这些按钮可以根据字体的大小伸缩。当填充和字体大小发生变化时,...
  • 效果: 实现代码(需要引入jquery): * { padding: 0; margin: 0; } .slider-panel { background-color: #fcc688; height: 450px; width: 600px; padding: 20px; margin: auto;... } })彩色渐变滑动条 0%

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,704
精华内容 3,481
关键字:

cssdisplaynone渐变