linear-gradient常用实现效果

之前也研究过css3的这个属性，感觉没什么大用，一般的开发不会用到，毕竟调出来的渐变不专业，不如找一个好看的图片，其实很多时候还是有用的，偷来三个例子。

一、控制虚线

一般写虚线都用dashed，但有时候出来的效果并不是我们想要的，比如控制虚线间的间距，感觉力不从心啊。
用linear-gradient效果还是比较理想的。

<div class="dashed"></div>

<style>

.dashed {

    height: 1px;

    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);

    background-size: 10px 100%;

}

</style>

另外关于虚线，复制demo，可自己调。

demo

<!DOCTYPE html>

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>title</title>

</head>

<body>

<div id="main">

    <div id="body">

        <div id="effect" class="part">

            <h3>效果：</h3>

            <div class="show">

                <div class="demo">

                    <h5>HTML代码：</h5>

                    <pre name="code" class="DlHighlight html"><span class="paren xml-tagangle">&lt;</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">class</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>dashed<span class="after">"</span></span><span class="paren xml-tagangle">&gt;</span><span class="paren xml-tagangle">&lt;/</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">&gt;</span></pre>

                    <h5>CSS代码：</h5>

                    <textarea id="cssCode" rows="6" cols="50"></textarea>

                    <h5>效果预览：</h5>

                    <div class="dashed"></div>

                    <h5>参数控制：</h5>

                    <p>选择实虚比例：<select id="ratio">

                        <option value="0.75">3:1</option>

                        <option value="0.666667">2:1</option>

                        <option value="0.6">3:2</option>

                        <option value="0.5" selected="">1:1</option>

                        <option value="0.3333333">1:2</option>

                    </select></p>

                    <p>选择虚线步幅(3-30)：<input type="range" id="width" min="3" max="30" step="1" value="4"></p>

                    <p>选择虚线宽度(1-10)：<input type="range" id="height" min="1" max="10" step="1" value="1"></p>

                    <p>选择虚线颜色：<input type="color" id="color" value="#00000"></p>

                </div>

            </div>

        </div>

    </div>

</div>

<style>

    .dashed {

        height: 2px;

        background: linear-gradient(to right, #ff8000, #ff8000 8px, transparent 8px, transparent);

        background-size: 16px 100%;

    }

</style>

<script>

var eleRatio = document.getElementById('ratio');

var eleWidth = document.getElementById('width');

var eleHeight = document.getElementById('height');

var eleColor = document.getElementById('color');

var eleStyle = document.querySelector('style');

var eleCode = document.getElementById('cssCode');

var generate = function () {

    var divide = Math.round(eleWidth.value * eleRatio.value * 100) / 100;

    var css = '.dashed {\n' +

'    height: '+ eleHeight.value +'px;\n'+

'    background: linear-gradient(to right, '+ eleColor.value +', '+ eleColor.value +' '+ divide +'px, transparent '+ divide +'px, transparent);\n'+

'    background-size: '+ eleWidth.value +'px 100%;\n'+

'}';

    eleCode.value = css;

    eleStyle.innerHTML = css;

};

generate();

// 事件

[eleRatio, eleWidth, eleHeight, eleColor].forEach(function (control) {

    control.addEventListener('change', generate);

});

</script>

</body>

</html>

二、用linear-gradient实现气泡对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div class="content">

        <p class="talk">这是对话内容</p>

    </div>

</body>

</html>

<style>

.content {

    margin-left: 70px;

}

.talk {

    display: inline-block;

    max-width: 80%;

    border: 1px solid #ddd;

    border-radius: 3px;

    padding: 6px 10px;

    font-size: 14px;

    background-color: #fff;

    position: relative;

}

.talk::before {

    content: '';

    position: absolute;

    width: 6px; height: 6px;

    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;

    background-size: 6px 1px, 1px 6px, 6px 6px;

    transform: rotate(-45deg);

    left: -4px; top: 13px;

}

</style>

三、用linear-gradient实现加减号

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>

    <input value="1" size="1">

    <a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

</body>

</html>

<style>

.btn {

    display: inline-block;

    background: #f0f0f0 no-repeat center;

    border: 1px solid #d0d0d0;

    width: 24px; height: 24px;

    border-radius: 2px;

    box-shadow: 0 1px rgba(100,100,100,.1);

    color: #666;

    transition: color .2s, background-color .2s;

}

.btn:active {

    box-shadow: inset 0 1px rgba(100,100,100,.1);

}

.btn:hover {

    background-color: #e9e9e9;

    color: #333;

}

.btn-plus {

    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);

    background-size: 10px 2px, 2px 10px;

}

.btn-minus {

    background-image: linear-gradient(to top, currentColor, currentColor);

    background-size: 10px 2px;

}

</style>

linear-gradient常用实现效果的更多相关文章

FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
php模拟数据库常用操作效果
test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...
jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些一.总结一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
HTML常用标签效果展示
HTML常用标签效果展示一.文本效果段落1---收到了开发建设看来得更加快乐圣诞节福利肯定是减肥的路上苏里科夫就是打开了飞机都是风口浪尖上的疯狂了大煞风景圣诞快乐的索科洛夫几点上课了关键是低空掠过 ...
jQuery中常用网页效果应用
一.常用网页效果应用 1.表单应用表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用例:获取和失去焦点改变样式首先,在网页中创建一个表单,HTML代码如下 <form actio ...
常用JS效果不断进步贴不停更新~ 纪念用~
常用效果 JS 都是Jquery 没有特殊说明 1.选项卡用的JQuery 以后学好点再来对比看下 /* * @parent 最外层父级元素 * @EventElement 触发事件元素 ...
transition:all 0.5s linear;进度条动画效果制作原理
Html: <span class="progress"><b ><i></i></b><em>50< ...
CSS3实现1前端常用Loading效果
此页动画效果都是gif图的,不想用代码写的话,下载图片就可使用. 第1种效果: 代码如下 <div class="loading"> <span></ ...
常用JS效果需要时更新。。。
1.手风琴效果 JS: $(function() { var aMenuOneLi = $(".menu-one > li"); var aMenuTwo = ...
css3常用动画效果集合01
/*由右到左进场*/ .FromRightToLeft{ -webkit-animation:FromRightToLeft 500s .2s ease both; } @-webkit-keyfra ...

随机推荐

解决Warning Couldn't flush user prefs: java.util.prefs.BackingStoreException: Couldn't get file lock.
系统:Ubuntu 16.04 LTS 环境:vscode+java extension pack打开了一个gradle的java项目:另外,用一个terminal启动了groovysh 报错: gr ...
python 信息同时输出到控制台与文件
python编程中,往往需要将结果用print等输出,如果希望输出既可以显示到IDE的屏幕上,也能存到文件中(如txt)中,该怎么办呢? 方法1 可通过日志logging模块输出信息到文件或屏幕.但可 ...
C#作为客户端调用gsoap生成的C++服务端
近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...
matlab与python读取tiff文件
matlab t=Tiff('IMG_3952.TIF', 'r+'); k = 1; t.setDirectory(k); img{k} = t.read(); src = img{1}; dst( ...
框架源码系列七：Spring源码学习之BeanDefinition源码学习（BeanDefinition、Annotation 方式配置的BeanDefinition的解析）
一.BeanDefinition 1. bean定义都定义了什么? 2.BeanDefinition的继承体系父类: AttributeAccessor: 可以在xml的bean定义里面加上DTD ...
Java Observer接口和Observable类实现观察者模式
对于观察者模式,其实Java已经为我们提供了已有的接口和类.对于订阅者(Subscribe,观察者)Java为我们提供了一个接口,JDK源码如下: package java.util; public ...
IDEA2018.2破解方法
前言之前也试过多种方式,但是总是使用了一会儿又需要破解,今天又找了一个,不知道可以使用多久. 目前看是可以破解开的,所以分享一下. 适用于JetBrain旗下版本为2.3或2.4的所有产品一.在 ...
【LInux】统计某文件夹下目录的个数
统计当前文件夹下文件的个数,包括子文件夹里的ls -lR|grep "^-"|wc -l 统计文件夹下目录的个数,包括子文件夹里的ls -lR|grep "^d" ...
2. ansible-playbook 条件语句-内部变量使用
内部变量指的是把变量定义在playbook里面或者是执行结果作为变量循环语句-标准Loops [root@LeoDevops playb]# cat p_loop.yaml - hosts: u12 ...
iOS学习之--字符串的删除替换（字符串的常用处理，删除，替换）
字符串操作,比较简单,仅做记录! 1.删除 NSString *str1 = @"<hello,wo r d!>"; //删除字符串两端的尖括号 NSMutableSt ...

linear-gradient常用实现效果

linear-gradient常用实现效果的更多相关文章

随机推荐

热门专题