<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变的竖线</title>
</head>
<style>
.div1 {
height: 500px;
border-left: 2px solid;
border-image: -webkit-linear-gradient( #00eba7 , #08b8e6) 30 30;
border-image: -moz-linear-gradient( #00eba7 , #08b8e6) 30 30;
border-image: linear-gradient( #00eba7 , #08b8e6) 30 30;
}
</style>
<body>
<div class="div1"></div>
</body>
</html>

CSS 竖线颜色渐变的更多相关文章

  1. css文字颜色渐变的3种实现

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...

  2. css 边框颜色渐变的半圆

    1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试. <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. css边框颜色渐变

    在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...

  4. css背景颜色渐变

    1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background ...

  5. css颜色渐变在不同浏览器的设置

    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...

  6. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  7. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  8. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. CSS 3 学习——渐变

    通过CSS渐变创建的是一个没有固定比例和固定尺寸的<image>类型,也就是说是一张图片,这张图片的尺寸由所应用的元素的相关信息决定.凡是支持图片类型的CSS属性都可以设置渐变,而支持颜色 ...

随机推荐

  1. OSG数学基础：坐标系变换

    三维实体对象需要经过一系列的坐标变换才能正确.真实地显示在屏幕上.在一个场景中,当读者对场景中的物体进行各种变换及相关操作时,坐标系变换是非常频繁的. 坐标系变换通常包括:世界坐标系-物体坐标系变换. ...

  2. C#控件DropDownList下拉列表默认打开

    c#中的控件DropDownList要实现默打开确实不容易,之前也是想过页面上的点击之后就打开了,那直接模拟点击不就行了,试过后大失所望,根本没有效果. 于是网上找到了一个例子能实现IE浏览器下的打开 ...

  3. Android 多屏幕适配 dp和px的关系 最好用dp

    Android 多屏幕适配 dp和px的关系 一直以来别人经常问我,android的多屏幕适配到底是怎么弄,我也不知道如何讲解清楚,或许自己也是挺迷糊. 以下得出的结论主要是结合官方文档进行分析的ht ...

  4. 第23天：js-数据类型转换

    一.padding1.内边距会影响盒子大小2.行内元素,尽量不用上下的padding和margin3.块元素嵌套块元素.子级会继承父级的宽度,高度由内容决定.如果给子级再设置padding,不会影响盒 ...

  5. WPF通过NPIO读写Excel操作

    自已摸索实现了对excel简单的上传和下载并做了一个封装类,下面分享一下. 先去官网:http://npoi.codeplex.com/下载需要引入dll(可以选择.net2.0或者.net4.0的d ...

  6. 【Python】Python time mktime()方法

    描述 Python time mktime() 函数执行与gmtime(), localtime()相反的操作,它接收struct_time对象作为参数,返回用秒数来表示时间的浮点数. 如果输入的值不 ...

  7. 【zoj2314】Reactor Cooling 有上下界可行流

    题目描述 The terrorist group leaded by a well known international terrorist Ben Bladen is buliding a nuc ...

  8. POJ2286：The Rotation Game——题解

    http://poj.org/problem?id=2286 题目大意:如图所示有一种玩具,每次可以拉动A-H的开关使得整个行(或列)向字母方向移动一位(如果移动到头的话则到行(列)尾部) 求使得中间 ...

  9. BZOJ2668：[CQOI2012]交换棋子——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2668 https://www.luogu.org/problemnew/show/P3159#sub ...

  10. nodejs创建多层目录

    1. fs.mkdir不能一次创建多层目录,必须先创建上层目录,再创建下层目录 //同步 fs.mkdirSync("./tmp/"); fs.mkdirSync("./ ...