linear-gradient

CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 css3线性渐变 语法： background: linear-gradient( direction , color-stop1 , color-stop2, ... ); 从上到下（默认）： #grad { 　　background: -webkit-linear-gradient(red, blue);/* Safari 5.1 - 6.0 */ 　　background: -o-linear-gradient(red, blue);/* Opera 11.1 - 12.0 */ 　　background: -moz-linear-gradient(red, blue);/* Firefox 3.6 - 15 */ 　　background: linear-gradient(red, blue); /* 标准的语法 */ } 从左到右： #grad { 　　background: -webkit-linear-gradient(left,red, blue);/* Safari 5.1 - 6.0 */ 　　background: -o-linear-gradient

背景新增属性和css渐变及倒影 一、background新增属性 　　background-size：指定对象的背景图像的尺寸大小。 　　background:url() 0 0,url() 0 100%;多背景 　　background-origin：指定对象的背景图像定位的原点。 　　 background-clip：指定对象的背景图像向外裁剪的区域。 　　background-image：linear-gradient()线性渐变 　　background-image：repeating-linear-gradient()重复的线性渐变 　　background-image：radial-gradient()径向渐变 　　background-image：repeating-radial-gradient()重复的径向渐变 　　background-origin 设置背景定位的原点 　　border-box： 从border区域开始绘制背景。 　　padding-box： 从padding区域开始绘制背景。 　　content-box： 从content内容区域开始绘制显示背 　　background-clip 背景裁剪区域 　　border-box： 从border区域向外裁剪背景。 　　padding-box： 从padding区域向外裁剪背景。 　　content

在界面中如何生成头像？ 示例 HTML CSS 示例 HTML < div class = " container " > < div class = " avatar avatar--green " > < div class = " avatar-body body--green " > < div class = " avatar-eye eye--left " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </ div > </ div > < div class = " avatar-eye eye--right " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </

效果预览 在线演示 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cPvMzTg 源代码下载 本地下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox 代码解读 定义 dom，是嵌套了3层的容器： <div class="checkbox"> <div class="inner"> <div class="toggle"></div> </div> </div> 居中显示： html, body, .checkbox, .checkbox .inner, .checkbox .inner .toggle { height: 100%; display: flex; align-items: center; justify-content: center; } 画出外侧椭圆： .checkbox { width: 10em;

颜色 CSS 中可以改变文字的颜色还有元素的背景颜色。可以用颜色关键字来定义颜色，如 red ，但是这些颜色关键字并不常用。 transparent transparent 可以让文字或背景变的完全透明的颜色，它就像 rgba(0,0,0,0) 的缩写。 currentColor currentColor 代表原始的 color 属性的计算值。比如当前元素 color 为红色，背景色设置为 currentColor ，那么现在背景色也为红色。 rgb、rgba 颜色还可以用 rgb 函数表示，如 rgb(255, 255, 255) 代表白色，它每个参数的取值范围是 0 到 255 ，它是用不同比例的红、绿、蓝来组成期望颜色。 rgba 函数代表红-绿-蓝-阿尔法，其中的 a 是透明度，取值范围是 0 到 1 。 除了使用 rgb 函数，还可以使用 16 进制来表示，它的语法是 #RRGGBB ，如果 #f3f3f3 ，代表 f3 （16 进制）数量的红-绿-蓝。如果红-绿-蓝数值两两相等，如 #ffffff ，就可以简写成 3 位 16 进制的形式 #fff 。在高版本的浏览器还可以用 16 进制表示透明度 #RRGGBBAA ， AA 的取值范围是 0 到 255 ，如果两两相等也可以简写成 #RGBA 形式。 hsl、hsla hsl 函数是用色相-饱和度-明度（Hue

效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cdKMBTk 源代码下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects 代码解读 在 dom 中定义一个容器： <div class="box">BUTTON</div> 容器居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; } 设置按钮的 2d 样式，为了便于调整按钮尺寸，使用了变量： .box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; -

相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片，这时候通常就拿起ps就是切切切。不说这种方式麻烦，有ui给你切好的情况已经不错，没有的就有自己动手。还可能有需要切一整张超大图的情况。作为一个“优秀”的前端，本着自己动手丰衣足食的理念，下面给大家介绍用 background 来绘制这些特的图片。 先来看看平时会出现的 遇上这种情况，通常处理就是切得下面的图片 再通过一下css得到 <div class="box"></div> <style> .box{ width: 500px; height: 500px; background: url('imgurl'); background-size: 20%; } </style> 当然现在不切图，直接用css来做 .box{ width: 500px; height: 500px; background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0, linear-gradient

渐变就是从一种颜色过渡到另一种颜色的填充过程，两种颜色相交时会进行混合，渐变的类型有两种： 1、线性渐变（linear）：通过 linear-gradient 函数定义 2、径向渐变（radial）：通过 radial-gradient 函数定义 语法： 线性渐变： background：linear-gradient （方向，颜色，…) 重复线性渐变 ：repeating-linear-gradient （方向，颜色，…) 渐变方向（或角度）： to left ：设置渐变为从右到左 相当于：270deg to right ：设置渐变从左到右 相当于：90deg to top ：设置渐变从下到上 相当于：0deg to bottom ：设置渐变从上到下 相当于：180deg（默认值） to left top ：设置渐变为从右下到左上 to right top ：设置渐变为从左下到右上 to bottom left ：设置渐变为从右上到左下 to bottom right ：设置渐变为从左上到右下 我们来看看linear-gradient的具体用法： 这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色. ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191119110157470.jpg 代码片段如下： <

1.各浏览器下渐变语法： 1.Webkit引擎的CSS3线性渐变语法与属性参数： -webkit-gradient( < type > , < point > [, < radius > ]?, < point > [, < radius > ]? [, < stop > ]*) //老式语法书写规则 -webkit-linear-gradient( [ < point > || < angle > ,]? < stop > , < stop > [, < stop > ]* )//新式语法 2.Gecko引擎的CSS3线性渐变语法与属性参数： -moz-linear-gradient( [ < point > || < angle > ,]? < stop > , < stop > [, < stop > ]* ) 3.Presto引擎的CSS3线性渐变语法与属性参数： -o-linear-gradient( [ < point > || < angle > ,]? < stop > , < stop > [, < stop > ]* ) 4.Trident引擎的CSS3线性渐变语法与属性参数： -ms-linear-gradient( [ < point > || < angle > ,]? < stop > , < stop > [, < stop > ]* ) 6

渐变： CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 分为线性渐变(linear-gradient)、径向渐变(radial-gradient) 线性渐变(linear-gradient)： 为了创建一个线性渐变，必须至少定义两种颜色。这个颜色就是你想呈现的平稳过渡的颜色，同时也可以设置一个起点和一个方向（或一个角度）。 语法：background:linear-gradient(direction,color1,color2……) 1、线性渐变—从上到下（默认情况下） 下面的实例演示了从顶部开始的线性渐变。起点是热粉色，慢慢过渡到深天蓝： 注：适配所有浏览器，需要加各大浏览器的前缀。下同，不会再赘述。 div{ background：linear-gradient(hotpink,deepskyblue);/ 标准的语法 / background：-webkit-linear-gradient(hotpink,deepskyblue);/ 谷歌，Safari / background：-o-linear-gradient(hotpink,deepskyblue);/ Opera / background：-moz-linear-gradient(hotpink,deepskyblue);/ Firefox /background：-ms