CSS3
祥哥的说
精一技而绝天下。。。
展开
-
rem和@medi实现响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。@media (max-width: 600px) { .contents { fle原创 2020-10-30 22:25:10 · 769 阅读 · 0 评论 -
纯CSS制作滑动切换开关
效果演示:代码部分:<input type="checkbox" class="toggle"><div class="inner"></div> body{ margin:0; height:100vh; background-color:#8FBC8B; display:flex; justify-con..原创 2018-11-01 21:42:57 · 1624 阅读 · 0 评论 -
清除浮动的经典方法与详解
A new micro clearfix hackThe clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further re...转载 2018-11-21 11:13:03 · 159 阅读 · 0 评论 -
compass核心模块-utilities--Genral--float mixin的使用
"double-margin bug in IE5/6"是浮动领域一个经典的bug.This module provides mixins that help you work around the double-margin bug in IE5/6.This file can be imported using: @import "compass/utilities/general...原创 2018-11-21 21:13:10 · 218 阅读 · 0 评论 -
超炫的进度条加载效果
红灰色调进度条 详情请使劲戳我,然后戳小星星!!! 动画在线编辑地址...原创 2018-11-20 13:06:35 · 556 阅读 · 0 评论 -
简单总结下opacity、transparent以及rgba
这几个概念最开始学的时候只是有个大致印象,现在复习这部分的知识点,发现不仔细区分一下,还真有点混乱。三者共同点是都和透明有关。先分着来说一下:1、opacity用来设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明)。2、transparent是颜色的一种,这种颜色叫透明色。3、rgba(r,g,b,a)稍复杂一点,r:红色值;g:绿色值;b:蓝色值。三个颜色值组...转载 2018-11-30 16:12:15 · 1299 阅读 · 0 评论 -
CSS原生变量“--”和var()
参考资料:https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/http://www.ruanyifeng.com/blog/2017/05/css-variables.html在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。随着CSS预编译工...转载 2018-11-30 17:10:37 · 1879 阅读 · 0 评论 -
Flex栅栏画廊原理以及flexbox gallery浏览器缩小后,各画廊格不等宽的问题
如图所示:在缩小到最小时出现这种不等间距问题,此时的栅格宽度有内部的字体宽度决定。这是正常情况的图片:2、英文单词或句子过长,不会自动切换到下一行 解决方法:CSS3属性:word-wrap,允许长单词或URL地址换行到下一行。 ...原创 2018-12-07 17:03:19 · 216 阅读 · 0 评论 -
CSS3:animation暂停动画播放,动画处于播放完成状态
animation-play-state动画的状态,可设running,paused。默认值running表示正在播放动画,paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。animation-fill-mode动画的时间外属性,可设none,forwards,backwards,both。默...转载 2018-12-09 18:45:04 · 3107 阅读 · 0 评论 -
动画完成后触发处理事件(animationend)和过渡效果完成后触发处理事件(transitionend)
animationend 事件在 CSS 动画完成后触发。CSS 动画播放时,会发生以下三个事件:animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发语法object.addEventListener("webkitAnimationEnd", myS...原创 2018-12-10 16:07:41 · 4959 阅读 · 0 评论 -
input的range类型滑动条的自定义样式设置
完整代码的项目应用--视频播放器中的音量和播放进度滑动条/* unholy css to style input type="range" *//*主要是滑动条的自定义样式设置*//*去除系统默认的滑动条样式,主要针对基于webkit的浏览器*/input[type=range] { -webkit-appearance: none; background:transpar...原创 2019-01-05 22:07:49 · 3584 阅读 · 0 评论 -
cursor 光标类型集合
cursor 属性规定要显示的光标的类型(形状)。设置方法:1、在CSS样式中通过cursor:xxx;来设置。2、在JavaScript中使用element.style.cursor=xxx;来设置具体的光标图形演示:具体的光标图形演示url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光...转载 2019-01-06 22:28:52 · 2471 阅读 · 0 评论 -
flex属性的全面总结---结合图形分析理解记忆
flex属性1、flex-grow属性2、flex-shrink属性3、flex-basis属性4、flex-wrap属性5、flex-direction属性6、flex-flow属性1、flex-grow属性一个数字,规定项目将相对于其他灵活的项目进行扩展的量。flex-grow 属性用于设置或检索弹性盒子的扩展比率。CSS 语法flex-grow: nu...原创 2019-01-06 23:10:44 · 1154 阅读 · 0 评论 -
自定义input的range滑动条样式
<input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1" title="音量"><input type="range" name="playbackRate"原创 2019-01-09 15:17:31 · 1041 阅读 · 0 评论 -
word-break断行规则、white-space空白处理、pre预格式化处理、word-wrap长单词及URL换行
1、word-break属性指定非CJK脚本的断行规则。提示:CJK脚本是中国,日本和韩国("中日韩")脚本。word-break: normal|break-all|keep-all;normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 2、 white-...原创 2019-01-15 19:28:11 · 2299 阅读 · 2 评论 -
word-spacing单词间隔和letter-spacing字符间隔
word-spacing 属性增加或减少单词间的空白(即字间隔)。normal 默认。定义单词间的标准空间。 length 定义单词间的固定空间。 inherit 规定应该从父元素继承 word-spacing 属性的值。 示例: letter-spacing 属性增加或减少字符间的空白(字符间距)。normal 默认。规定字符间没有额外的空间。...原创 2019-01-15 19:59:54 · 1234 阅读 · 0 评论 -
font-size:625%;
1.我看了网上很多关于rem的资料,基本都说浏览器的默认字号就是16px,然后直接定义font-size:62.5%。但是,rem属于css3的属性,有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px,那么上面的10/16换算就不成立,直接给html定义font-size:62.5%不成立。2.chrome强制字体最小值为12px,低于12px按12px处理,那上面的1rem=10p...转载 2019-05-03 15:45:03 · 1824 阅读 · 0 评论 -
background的常见属性及用法
原创 2019-05-03 21:22:02 · 1723 阅读 · 0 评论 -
纯CSS实现立体感圆盘(立体化按钮),点击有图
在线编辑:https://codepen.io/sunnercms/<div class="inner"> <div class="disc"> </div></div>.inner{ position:relative; width:300px; height:300px; border-radius:150p...原创 2018-11-01 21:12:24 · 7636 阅读 · 0 评论 -
CSS3中的box-shadow属性,结合图案的详细分析
补充:纯CSS3动画制作box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。(可以运用该属性画多边框)该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ,阴影也会有圆角效果。语法:box-shadow: offset-x | offset-y | blur | spread | color | inset;/* offs...原创 2018-10-20 22:04:40 · 2597 阅读 · 0 评论 -
CSS常用颜色配色的参数设置
相关的链接:(1)纯CSS3动画,图案制作中遇到的颜色(2)codepen很赞的在线编辑工具(3)颜色名称对照表+16机制表示1.background-color: peru;秘鲁色颜色展示:Peru 明度稍高的褐色,除了褐色低调,稳定等特性,由于明度关系,还给人温暖的感觉,这个色彩和巧克力色较为接近,同样具有巧克力色的一些特性,也经常被使用到食物当中。2.back...原创 2018-10-17 15:14:53 · 3489 阅读 · 0 评论 -
CSS3 中的rem
以需求来介入:都知道现在手机屏幕分辨率越来越多了,假设我们的网页需要适配的iPhone4(320px),iPhone6(375px),iPhone6 Plus(414px)。我们的需求是,当用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的文字、图片、按钮大小。(1)iPhone4的时候,希望网页的内容文字大小12px=12*(320/320)px,按钮的大小是240px。(2)Iphone...转载 2018-03-09 18:37:18 · 473 阅读 · 0 评论 -
CSS视口单位:快速入门
CSS视口单位:快速入门翻译 2017年04月27日 08:36:45标签:css685单位意义视口单位的应用全屏背景图片或部分创造完美适应的标题居中元素注意事项浏览器支持翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用,用于提升大家css知识的广度单位意义CSS中有四个基于视口单位,分别为vh、vw、vmin和vmax。视口高度(vh)-...转载 2018-03-09 18:41:13 · 890 阅读 · 0 评论 -
什么是BFC?对bfc的简单理解
在讲BFC之前,先来看看一个例子1234567891 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type=&quo转载 2018-03-19 20:20:49 · 1404 阅读 · 0 评论 -
CSS positon属性
详解CSS position属性 阅读目录基础知识绝对定位固定定位相对定位应用举例总结position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用。回到顶部基础知识postion属性我们成为定位,它...转载 2018-03-21 19:32:55 · 273 阅读 · 0 评论 -
CSS3的border-radius属性详解
CSS3的border-radius属性详解border-radius: none | length{1,4} [/ length{1,4} 其中每一个值可以为 数值或百分比的形式。 length/length 第一个lenght表示水平方向的半径,而第二个表示竖直方向的半径。 如果是一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等...转载 2018-04-03 14:53:50 · 6411 阅读 · 0 评论 -
CSS3 box-shadow 属性
定义和用法box-shadow 属性向框添加一个或多个阴影。语法box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值描述测试h-shadow必需。水平阴影的位置...转载 2018-05-09 13:02:43 · 237 阅读 · 0 评论 -
详解background-position
你真的了解background-positionbackground属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background...转载 2018-05-02 21:26:57 · 16599 阅读 · 4 评论 -
CSS3中display的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex1 .container {2 display: flex;3 flex-direction: column;4 align-items: center;5 background-color: #b3d4db;6 }编译之后的效果很明显,界面的布局也很合理,看起来很清晰。那么究竟这个属...转载 2018-05-09 16:33:38 · 197 阅读 · 0 评论 -
CSS3的calc()使用
CSS3的calc()使用作calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也...转载 2018-05-09 16:39:08 · 309 阅读 · 0 评论 -
CSS Sprites
CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。 ...转载 2018-06-11 13:16:58 · 1273 阅读 · 0 评论 -
animate.css CSS3的跨浏览器动画库
简介animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 anima...转载 2018-07-04 11:37:04 · 313 阅读 · 0 评论 -
CSS三栏布局——中间固定两边自适应宽度
CSS三栏布局——中间固定两边自适应宽度今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下,接着与大家一起测试,还是通过了各浏览器的考验,为了方便自己以后好查阅,也想让不知道的朋友一起学习一...转载 2018-07-27 11:28:00 · 2202 阅读 · 0 评论 -
元素浮动以及清除浮动的方法
浮动到底是什么?浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。请默念3次!浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道。...转载 2018-07-27 15:08:26 · 2331 阅读 · 2 评论 -
css实现水平居中的几种方式
css实现水平居中的几种方式一、对于行内元素:text-align:center;二、对于确定宽度的块级元素:(1)margin和width实现水平居中常用(前提:已设置width值):margin-left:auto; margin-right:auto;(2)绝对定位和margin-left: -(宽度值/2)实现水平居中固定宽度块级元素水平居中,通过使用...转载 2018-07-27 20:37:44 · 675 阅读 · 0 评论 -
inline-block元素的空白间距解决方法---一网打进
如何解决inline-block元素的空白间距 inline-block有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-b...转载 2018-07-27 20:40:18 · 156 阅读 · 0 评论 -
opacity、transparent以及rgba的区别
简单总结下opacity、transparent以及rgba这几个概念最开始学的时候只是有个大致印象,现在复习这部分的知识点,发现不仔细区分一下,还真有点混乱。三者共同点是都和透明有关。先分着来说一下:1、opacity用来设置元素的不透明级别,从 0.0 (完全透明)到 1.0(完全不透明)。2、transparent是颜色的一种,这种颜色叫透明色。3、rgba(r,g,b,a)...转载 2018-10-16 21:54:25 · 5311 阅读 · 0 评论 -
由link和@import的区别引发的CSS渲染杂谈
由link和@import的区别引发的CSS渲染杂谈 我们都知道,外部引入 CSS 有2种方式,link标签和@import。它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起。如今,很多学者本着知其然不欲知其所以然的学习态度,不求甚解,只求结论。所以,本文遵循 css hack 的渐进识别原则,结论 → 区别 → 争议 → 细节 → 祖坟 → 感想,逐渐加深理论层级...转载 2018-03-15 19:30:36 · 258 阅读 · 0 评论