linear-gradient | 易学教程

【Vue_10】渐变色文字

阅读更多关于【Vue_10】渐变色文字

实现渐变色文字的原理，将背景色改为渐变，然后将背景剪裁出文字，最后将文字隐藏一. CSS 样式示例 /* 将背景设为渐变 */ background-image: -webkit-linear-gradient(top, white, #a4a4a4, #6a6b6b); /* 规定背景绘制区域 */ -webkit-background-clip: text; /* 将文字隐藏 */ -webkit-text-fill-color: transparent; 二. 属性详解 1. linear-gradient linear-gradient() 函数用于创建一个线性渐变的 "图像"。浏览器支持语法 /* direction: 方向；color-stop: 颜色 */ background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 示例 /* 从左侧开始的线性渐变，从红色开始，转为黄色 */ background-image: linear-gradient(to right, red , yellow); /* 从左上角到右下角的线性渐变 */ background-image: linear-gradient(to bottom right, red , yellow); 2.

CSS3:background渐变

阅读更多关于 CSS3:background渐变

今天总结渐变的问题，渐变分为线性渐变、径向渐变。呼呼，废话少说，线性渐变： background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点中间颜色的位置,结束点颜色); Linear:渐变的类型（线性渐变）；渐变的形式：可选参数有两种方式-1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。 2、使用关键字，left代表从左到右，top代表从上到下，同理right就是从右到左，lefttop-从坐上到右下，同理leftbottom，righttop，rightbottom。中间颜色与中间颜色位置为可选参数。不过要考虑浏览器的兼容，咱们这样写： -webkit-gradient（linear,0 0,0 100%,from(起始颜色,to(结束颜色)）； /*for Safari4+,Chrome 2+*/ -webkit-linear-gradient（起始颜色, 结束颜色）； /*for Safari 5.1+,Chrome 10+*/ -moz-linear-gradient（起始颜色, 结束颜色）； /*for firefox*/ -o-linear-gradient（起始颜色, 结束颜色）； /*Opera*/ linear-gradient（起始颜色, 结束颜色）； /*标准属性*/

CSS3学习基本记录

阅读更多关于 CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.png 30出的地方重复合理的重复 stretch:默认值。拉伸图像来填充区域 repeat:平铺（repeated）图像来填充区域 round:类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 border-image-source:于指定要用于绘制边框的图像的位置 border-image-slice:图像边界向内偏移 border-image-width:图像边界的宽度 border-image-outset:用于指定在边框外部绘制 border-image-area 的量 border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮 CSS3 背景 background-size:设置背景图标大小

CSS3_线性渐变（linear-gradient）+ 盒子阴影（box-shadow）

阅读更多关于 CSS3_线性渐变（linear-gradient）+ 盒子阴影（box-shadow）

-——css3的文章好久没有写过了。今天看到一个比较酷炫的属性——线性渐变（linear-gradient）,决定谈谈这个属性。 linear-gradient ——CSS3 grandient分为线性渐变(linear-gradient)和径向渐变（radial-gradient）。今天主要谈谈线性渐变。(PS:在IE下的实现需要通过IE特有的滤镜来实现。) 线性渐变的语法先来看看Mozilla、Webkit、Opera下的语法 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ); 2 3 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 4 5 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */ 参数说明： 1，第一个参数表示线性渐变的方向，top是从上到下，left是从左到右，如果定义了left top，那就是从左上角到右下角。 2，第二个和第三个参数分别是起点颜色和终点颜色。你可以在它们之前插入更多的参数，表示多种颜色的渐变

前端复习Day12 背景渐变

阅读更多关于前端复习Day12 背景渐变

CSS3 渐变 CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。一、背景渐变 1）线性渐变语法：background: linear-gradient(direction,color-stop1, color-stop2, ...); 说明：direction：默认为to bottom，即从上向下的渐变； stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。 div { background : linear - gradient ( to left , red , blue ) } div { background : linear - gradient ( to right , red , blue ) } div { background : linear - gradient ( to bottom , red , blue ) } /* 浏览器默认值 */ div { background : linear - gradient ( to top , red , blue ) } 分别产生“从右到左”、

css实现三角形

阅读更多关于 css实现三角形

css 实现三角形面试中被问到如何用css实现一个三角形，想了半天就就想到一个border的实现，考虑了到transform的实现，但是没想来怎么去做。晚上查了各种资料最终实现了三种css的写法。 1.border 网上最多也是最灵活的实现方式 <div class="arrow-up"> </div> <div class="arrow-down"> </div> <div class="arrow-left"> </div> <div class="arrow-right"> </div> /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid red; } /*箭头向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; } /*箭头向左*/ .arrow-left { width:0; height:0; border-top

HTML5和CSS3重点知识汇总

阅读更多关于 HTML5和CSS3重点知识汇总

HTML5 1、什么是H5： HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体。 2、新增特性：绘画<canvas>；多媒体播放<video><audio>；本地离线存储；特殊内容元素<article><header><nav><footer>；表单控件<calendar><date><email>等 3、最小的HTML5文档 <!DOCTYPE html>  <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 4、支持：最新版Safari,Chrome,Firefox,Opera支持，IE9支持 5、自定义标签：首先在html标签通过xmlns:命名空间名来指定；其次可以使用这个标签写内容（通常命名采用-连接方式）；最后，在样式里使用命名空间名\:标签名{}定义 <!DOCTYPE html> <html xmlns:ownhtml> <head> <meta charset="UTF-8"> <title>Document</title> <style> //2、这里如果有多个标签，都是从ownhtml创建的

background 实现四角选中框

阅读更多关于 background 实现四角选中框

css 背景background background: linear-gradient(#d70c25,#d70c25) left top, linear-gradient(#d70c25,#d70c25) left top, linear-gradient(#d70c25,#d70c25) right top, linear-gradient(#d70c25,#d70c25) right bottom, linear-gradient(#d70c25,#d70c25) right bottom, linear-gradient(#d70c25,#d70c25) left bottom, linear-gradient(#d70c25,#d70c25) left bottom background-repeat: no-repeat; background-size: 4px 40px,40px 4px; 实现效果原理：background 上绑定的多项背景图实际为background-image 和 background-position；也就是图片和位置 linear-gradient 是一种特殊的image类型，之后禁止重复和background-size是设置每个点的宽高，一个逗号分隔一个点顺序分别为左/左上、右/右上以及左/左下、右/右下来源： oschina

加密狗授权软件破解

阅读更多关于加密狗授权软件破解

最近，我们看到一些文章，认为 select 的样式限制并没有太大的改变，但是我决定回到这个问题上来，并亲自进行实验确认是否真的是这样。事实证明，合理的样式集可以让 select 在新的浏览器中创建一致且有吸引力的样式，同时在旧版本中也能得到很好的展示。快速示例首先，先展示下浏览器原生的 select 元素。根据浏览器的不同，最终展出来的外观也会有所差异。这是一个本地选择元素苹果香蕉葡萄橘子下面是添加了样式后的 select。没有使用其他包装元素或者伪元素（IE10+ 除外）：你可以在这个地址里看到它在不同布局上下文中的展示效果。代码 select 框的 HTML 代码如下。注意，这里是通过 .select-css 这个类控制它的样式的。这是一个本地选择元素苹果香蕉葡萄橘子复制代码下面是控制 select 外观的 CSS，你也可以在我们的 select-css 仓库中找到。这里还添加了部分的注释说明： /* class applies to select element itself, not a wrapper element / .select-css { display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line

博客园主题魔改

阅读更多关于博客园主题魔改

网格背景 body { font-family: “Courier New”,"Bitstream Vera Sans Mono",MONACO,Consolas,"DejaVu Sans Mono",monospace,Arial,sans-serif; margin: 0; background-image: url(//www.cnblogs.com/skins/BlueSky/images/bg.gif); background-repeat: repeat; background-color: #FFFDFA; } 好看的网格背景 body { margin: 0; background-color: #FFFDFA; background-repeat: repeat; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center; } postbody 文章内页网格背景 div

订阅 linear-gradient