css
文章平均质量分 65
爱编程的兔子
很帅
展开
-
利用纯CSS实现条纹背景
原理: 如果多个色标具有相同的位置,他们会产生一个无限小的过渡区域,从效果上看,颜色会从这个位置突然变化,而不是一个平滑的过程。 linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型,因此我们可以通过background-size来控制渐变的大原创 2018-05-08 18:05:44 · 8501 阅读 · 1 评论 -
linear-gradient()的神秘面纱
CSS linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。一、线性渐变的构成1、利用PS理解渐变的原理我们先看看PS上的渐变,简单了解下渐变的原理: 如图所示,下面总共六个色块,代表了渐变的六种颜色,位置分别为0%、20%、40%、60%、...原创 2018-05-08 16:21:41 · 402 阅读 · 0 评论 -
如何实现边框内圆角
实现效果如下: 对于上述效果,我们可以用两个嵌套的div实现,如下:<div class="test-wrap"> <div></div></div>div{ width: 180px; height: 100px;}.test-wrap{ background: red; padding:...原创 2018-05-08 10:53:48 · 3051 阅读 · 0 评论 -
CSS3 calc()是怎么实现计算
css3的calc()函数允许我们在属性值中执行数学计算操作。例如,我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。calc(表达式) - 表达式支持加、减、乘、除运算,同时也支持单位的混合使用(%、px、rem、em等); - 表达式中有”+”、”-“运算符的,前后必须要有空格,这个是向前兼容,后期可能会带入变量等有”-“连字符; - 虽然“*”“/”没有空格...转载 2018-05-07 16:32:52 · 8402 阅读 · 1 评论 -
CSS实现多重边框
想到多重边框,我们可能会通过多个元素来模拟实现,但是如何在一个元素上实现多重边框呢?如下图: 1、box-shadow我们可以通过box-shadow来实现。 box-shadow: h-shadow v-shadow blur spread color inset | outset; 分别是:水平阴影位置 垂直阴影位置 模糊距离 扩张半径 颜色 内部阴影或者外部阴影 实现多重边框...原创 2018-05-07 14:59:07 · 3246 阅读 · 0 评论 -
CSS自定义属性学习笔记
找了很久关于–accent-color的资料,但是没有找到,以下完全是个人理解,如果有错误,请大家在评论区指正,非常感谢。–accent-color css中的变量,类似于currentColor,currentColor只是指当前元素的color颜色的值,但是–accent-color 是指定其值,更像是一个变量名,它可以指定属性后面任何值,可以是颜色,可以是具体像素值,可以给任何一个属性给...原创 2018-05-07 14:19:52 · 1435 阅读 · 2 评论 -
background简写
background是一个简写属性 background: color image position/size repeat origin clip attachment initial | inherit;它的展开式属性为:background-color/*背景颜色(CSS1)*/background-image/*背景图片(CSS1)*/background-position/...原创 2018-05-07 10:35:24 · 5632 阅读 · 0 评论 -
width/height新视界
众所周知,width height是用来指定元素的宽度和高度的,可能我们平时用到具体的<length> 和<percentage> 比较多,那他们还有其他的值吗?如果我们根据内容的宽度来决定元素的宽度(随着内容自适应)该如何做呢?我们以最小或者最大的元素内的内容的宽度或者高度来决定元素的宽高该如何实现呢?CSS3给我们提供了好方法,具体是什么方法呢?值wid...原创 2018-05-11 14:57:01 · 937 阅读 · 0 评论 -
纯CSS实现糖果按钮
废话不多说,直接上代码:原创 2018-05-10 14:49:47 · 941 阅读 · 0 评论 -
radial-gradient()的前世今生
1、radial-gradient() 原理CSS radial-gradient()函数创建一个由原点(渐变中心)辐射开的颜色渐变的图片,边缘形状只能为为circle或者ellipse,其结果属于<gradient>数据类型,是一种特别的<image>数据类型。 径向渐变(radial-gradient)由其中心点、边缘形状轮廓及位置、色值的结束点(color-...原创 2018-05-10 14:37:42 · 6605 阅读 · 0 评论 -
利用linear-gradient来实现信封边框效果
还是利用渐变来实现的,我们废话不多说,直接上代码:width: 200px;height: 80px;border-color: transparent;background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0,red 12.5%,tra...原创 2018-05-09 17:57:18 · 1519 阅读 · 0 评论 -
box-shadow学习笔记整理
box-shadow不用多说,大家都知道是给元素设置阴影的,但是使用过程中有很多有意思的技巧。定义box-shadow是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius,阴影同样对圆角生效。如果同时设置了多个阴影,那么第一个在最上面,以此类推。初始值:none适用于所有元素,包括伪类继承性:无语法box-shadow:inset...原创 2018-05-15 16:10:03 · 336 阅读 · 0 评论 -
CSS中clip-path属性
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状。例如:circle()等。 clip-path已经代替了现在已经弃用的剪切clip属性。初始值:none使用元素:所有元素,在SVG中,适用于不包括defs元素和所有图形元素的容器元素继承性:否语...原创 2018-05-15 18:56:19 · 1513 阅读 · 0 评论 -
flexbox布局详解
flexbox——一维布局模型,由flex-container和flex-item(flex容器)构成,为flex-item(flex元素)之间提供了强大的空间分布和对齐能力。原创 2019-06-10 16:49:33 · 912 阅读 · 0 评论 -
CSS单位总结
CSS中,单位分为两类绝对单位:无论其他相关的设置怎么变化,绝对单位指定的值是不会变化的;相对单位:没有固定的度量值,是由其他元素尺寸来决定的相对值。注意:此处的相对指当前元素的字号(font-size)或者视口(viewport)尺寸。绝对单位有:单位简介px像素 (计算机屏幕上的一个点),1px = 1/96inpt磅 (Points) ,1 pt ...转载 2018-11-27 16:48:07 · 505 阅读 · 0 评论 -
浏览器渲染原理及解剖浏览器内部工作原理
一、浏览器如何工作简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么工作的:用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;浏览器开始载入html代码,发现&lt;head&gt;标签内有一个&lt;link&gt;标签引用外部CSS文件;浏览器开始载入html代...转载 2018-10-17 14:07:31 · 511 阅读 · 0 评论 -
CSS中的斑马条纹
表格中的斑马条纹表格中的斑马条纹很容易实现 你可以使用nth-child来实现:tr:nth-child(even){ background: #E9E9E9;}也可以使用nth-of-type来实现:tr:nth-of-type(even){ background: #E9E9E9;}文本中的斑马条纹那么我们如何实现一段文本行中的斑马条纹效果呢?...原创 2018-08-03 14:44:22 · 4174 阅读 · 0 评论 -
CSS3之hyphens(连字符)
1,连字符连字符分为硬连字符和软连字符:硬连&amp;hyphen;字符:,即使该单词没有中间换行,也会显示连字符软连字符:&amp;shy;,只有单词中间换行才显示连字符2,hyphens属性CSS3了提供hyphens属性指定文字多行自动换速行应断字既可以在中的相关资料:软使用连字符指定换速行点,也可以由浏览器在适当的位置插入换行符。属性值:可以加前缀-webkit-状...原创 2018-08-03 11:15:18 · 8506 阅读 · 4 评论 -
CSS之mask实现方法汇总
在前端中,我们经常要实现遮罩层,来弱化后面的一切整体,从而突出显示某些特定的元素,比如我们的弹窗,那么mask(遮罩层)有多少种方法可以实现呢?&lt;body&gt; &lt;div class="mask"&gt;&lt;/div&gt; &lt;div class="dialog"&原创 2018-08-02 14:48:23 · 5857 阅读 · 0 评论 -
tab-size属性
tab-size 自定义制表符的宽度。通常我们使用pre来展示,比如我们要展示带格式的代码块,pre标签是我们最好的选择,但是在浏览器展示中,tab相当于8个字符,这个就很头疼了,所以展示只能避开tab键了,那么,有更好的方法解决这个问题吗? 有的,tab-size完美的解决了这个问题,那详细看下这个属性:默认值:8具有继承性值:1、可以为具体的数字(制表符对应的空格数)2、...原创 2018-08-06 17:18:11 · 1228 阅读 · 0 评论 -
在浏览器的标签页显示网站标志图标(或指定图标)的方法
如下图: 对于不同的浏览器,方法是有差别的 1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索 2.这大概是所有浏览器通用的在标签页加入指定图标的方法: 把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入<link rel="shortcu...转载 2018-07-24 15:15:52 · 1258 阅读 · 0 评论 -
清除Chrome浏览器下默认浅黄色背景(保存密码时出现)
当某个登录的页面我们保存密码之后,后面登录账户名和密码会自动填充,我们可以观察到,Chrome浏览器自动加了一层淡黄色的背景,如下图: 那么我们改如何清除默认的样式呢?首先我们看到它默认的代码如下: 看到这个,是不是马上想到如下代码:input:-webkit-autofill{ background:#fff!important; //这里可以是你想要的任何颜色}...原创 2018-07-11 17:29:22 · 2417 阅读 · 0 评论 -
CSS之伪随机背景
前面文章中有说到渐变实现条形背景,如下:div{ width: 600px; height: 200px;}.grad-03{ background: linear-gradient(90deg,orange 15%,yellowgreen 0,yellowgreen 40%,brown 0, brown 65%,transparent 0),pink; ...原创 2018-05-09 17:22:27 · 1012 阅读 · 0 评论 -
利用渐变实现多种几何图案
把多个渐变叠加起来会发生什么事呢?div{ width: 200px; height: 200px; border-radius: 100%; border: 8px solid rgba(255,255,255,0.6); background-clip: border-box;}例1background: #fff;backgroun...原创 2018-05-09 15:09:08 · 974 阅读 · 0 评论 -
移动端line-height问题
最近碰到了这样一个问题,设置line-height属性让文字垂直居中,发现在PC端肉眼观察是居中的,但是在移动端(Android)上总是发现文字偏上,所以有以下的研究。搜索发现有人说在Android上会有2px的向上偏移,但是实践证明并不是,下面上图(本来准备制成表格比较起来比较方便,但是发现不能制作表格)ios5 上:82px;下:84px;ios6 上:82px;下:84px;原创 2017-01-10 17:42:59 · 18430 阅读 · 5 评论 -
钟摆(圆锥摆)效果
实现思路直接用CSS3就可以实现,首先将转换元素的位置设置为顶部居中,然后设置转换角度,还有一点需要注意:在设置animation的时候将时间设置为ease-in-out,否则钟摆在左右两个最高点有停顿,看着不是很舒服。代码好了,下面直接上代码(html的布局是可以调整的,我这里是项目中的)<div class="int-entry-page-label"> <span></span></原创 2017-04-06 11:59:11 · 2059 阅读 · 0 评论 -
刻度尺效果
废话不多说,我们直接上代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><meta name="format-detectio原创 2017-04-05 18:38:54 · 3356 阅读 · 0 评论 -
css实现元素翻转(不是旋转)
有时候我们要实现元素的垂直或者水平翻转,尤其是图片的翻转,两张对称的图片,可以用两张图片来解决这个问题,那么其他的元素呢?而且存两张图片并不是上上策,如何用代码实现呢? CSS3提供了transform属性,实现方法如下:水平翻转:transform: scale(-1,1);垂直翻转:transform: scale(1,-1);那么问题来了,transform:scale(x,,y)不是缩放吗原创 2017-04-14 18:53:33 · 13880 阅读 · 0 评论 -
移动端滚动条的问题之一
问题描述:当移动端写滚动效果时,会多出一部分,而且移动端和PC端的大小不一样,问题如下图圈出红色部分: PC端: Android: iOS 原因:多出的红色部分其实是滚动条的宽度,咱们直接上代码看:.sq-combination-tit{ width: 100%; overflow: hidden; overflow-x: auto; -webkit-原创 2017-01-13 11:10:00 · 6415 阅读 · 0 评论 -
table-layout属性
用来显示表格单元格、行、列的算法规则。 table-layout有三个属性值:auto、fixed、inherit。 auto:默认,自动表格布局,列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。 fixed:固定表格布局,水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比,原创 2016-07-21 15:03:13 · 5700 阅读 · 0 评论 -
开关按钮
<div class="switch-btn"> <input type="checkbox" class="c1" /> <div class="switch-inner"> <div class="btn"> <span class="active">ON</span> <span class="inactive">原创 2016-07-20 17:19:01 · 578 阅读 · 0 评论 -
复选框
<div class="icon-check"> <input class="c1" type="checkbox" name="" id="input-check" value="" /> <label for="input-check">复选框</label></div>.icon-che原创 2016-07-20 16:24:34 · 318 阅读 · 0 评论 -
单选框重写
<div class="icon-radio"> <input class="r1" type="radio" name="" id="input-radio" value="" /> <label for="input-radio">单选框</label></div>.icon-radio{ display: inline-block;}.icon-radio .r1原创 2016-07-20 16:23:02 · 360 阅读 · 0 评论 -
CSS写箭头
原理:当宽度和高度都为0时,整个大小就是由border撑起来的,也就是说每个边组成了一个三角形,当你变换三角形的颜色时,就会得到不同的的箭头甚至其他的图像<a class="select-box" href="#"></a>.select-box{ position: relative; display: block; width: 200px; height: 40原创 2016-07-20 11:19:31 · 364 阅读 · 0 评论 -
input中文字的垂直居中
我们一般设置文字垂直居中用line-height属性,但是在Chrome浏览器中使用line-height时input中的文字还是没有居中,针对这一问题,解决办法如下:input{ width: 100%; height: 0.4rem; padding: 0.1rem; line-height: normal; box-sizing: border-box;原创 2016-07-20 10:33:04 · 3822 阅读 · 0 评论 -
设置div水平垂直居中
效果:设置div水平垂直居中,随着页面的大小变动,当页面的宽度或者高度减小到小于div的宽度或者高度,div始终居中,并且减掉两边的内容1、水平居中left: 50%;margin-left: -1.87px;(这里的大小是元素宽度大小的一半)2、垂直居中top: 50%;margin-top: -1.87px;(这里的大小是元素高度大小的一半)3、垂直水平居中top:50%;left:50%原创 2016-07-18 13:53:52 · 405 阅读 · 0 评论 -
移动端的三种输入方式
移动端的三种输入方式:我们知道的有input和textareainputinput有很多形式的输入,输入的字段可以是文本字段、复选框、掩码后的文本控件、单选按钮等,但是只能输入一行。 例如:<input type="text" palceholder="请输入您的姓名" / >textareatextarea是文本域标签,定义多行文本,但是必须要固定高度,无法实现随着文本内容自动增加高度。 那么原创 2017-04-24 19:20:39 · 2221 阅读 · 0 评论 -
关于input不同type值的样式重置
所有type通用样式:.input-wrap input{ display: block; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 30px;}1、type=”button/submit原创 2017-05-26 20:00:22 · 8882 阅读 · 1 评论 -
贝塞尔曲线——cubic-bezier详解
在animation和transition两个属性中,cubic-bezier是控制变化的速度曲线,下面我们来了解下什么是cubic-bezier。cubic-bezier称为三次贝塞尔曲线,主要是生成速度曲线的函数,规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>) . 从上图中我们可以看到,cubic-bezier有四个点: 两个默认的,即:P0(0,0),P3(1转载 2017-12-13 19:03:09 · 60897 阅读 · 2 评论 -
transform-origin属性
以下是我自己的理解,有错误请各位指正,谢谢!W3CSchool的定义是:允许你改变被转换元素的位置,2D元素能够改变元素X轴和Y轴。3D转换元素还能改变其Z轴。 默认值:50% 50% 0 浏览器支持: 1、IE10、Firefox、opera支持transform-origin属性; 2、IE9支持替代的-ms-transform-origin属性(仅适用于2D转换); 3、Safa原创 2017-12-13 15:29:48 · 1327 阅读 · 0 评论