css3
关注
分享
扫一扫
树洞菇凉
这个作者很懒，什么都没留下…
展开
-
图片鼠标移入图片改变颜色、显示另外一张图片（2种方式）
1：实现鼠标移入之后图片更改为content中配置的路径// 给图片 增加class或id通过class或id给图片添加CSS样式<img alt="" class="look_flag" src="../assets/images/index/look.png"/>.look_flag{ display:block; width: 30px; height: 20px; float: right; margin-bottom: 0px;...原创 2021-04-20 10:19:42 · 3417 阅读 · 0 评论 -
CSS常用简写样式
1：文本1)：文字简写// 倾斜 粗细 字号/行高 字体font: italic bold 1em/1.5 'Courier New', Courier, monospace;2：盒子模型1)：内外外边距padding/margin一个值：上下左右padding/margin两个值：上下 左右padding/margin三个值：上 左右 下padding/margin四个值： 上 下 左 右2)：边框轮廓线简写//线条样式 粗细 颜色border..原创 2021-02-22 15:24:24 · 929 阅读 · 0 评论 -
Bounce 动画的认识
Bounce指的是什么？弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。语法 (Syntax)@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } 示例如下：（效果：运行时图片向上弹跳）<html> .原创 2021-02-22 11:19:50 · 519 阅读 · 0 评论 -
css——奇数、偶数、指定数样式
第一种：简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。/* 把第3个LI的背景设为橙色 */li:nth-child(3){ background:orange;} 第二种：倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。/* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */li:nth.原创 2021-01-27 10:15:14 · 3550 阅读 · 0 评论 -
CSS 中的 initial、inherit、unset、revert、all
在css中，initial（初始）、inherit（继承）、unset（未设置）、revert（还原）这四个关键字可以应用于所有的CSS属性initial - 初始默认值。(IE不支持) inherit - 继承直接父元素的对应属性值。(IE7-不支持) unset - 表示如果该属性默认可继承，则值为inherit，否则值为initial。(IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持) revert - 表示样式表中定义的元素属性的默认值。若用户定原创 2021-01-26 17:38:09 · 1951 阅读 · 0 评论 -
多张小图拼接为一张大图进行模糊图片切换
1：效果图如下：2：filter 定义了元素(通常是)的可视效果blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0代码如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2020-08-10 14:01:48 · 823 阅读 · 0 评论 -
CSS display:grid 网格布局
主要属性：grid-template-columns：//竖向排列grid-template-rows：//横向排列Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。区别：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大首先比较一下flex和grid实现自适应九宫格，高度800px，宽原创 2020-08-10 09:34:37 · 1259 阅读 · 0 评论 -
css3中使用calc()计算宽高
calc()是什么？是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】；calc()的语法：使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中原创 2020-07-07 17:46:26 · 3937 阅读 · 0 评论 -
height calc()函数 css中用100%的宽度/高度
在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的:.container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！}只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算；扩展：vh：...原创 2020-04-01 10:57:03 · 10062 阅读 · 1 评论 -
css图片不变形处理
当UI出好图时，图片的格式都是有一定比例。但是你不知道的是从后台拉取的图片到底是什么比例的。如果给图片写死宽高的话，就会出现图片变形的问题目前的处理有两种方式１，通过背景图的方式处理。通过background-size作用在容器上<div class="img_background"></div>.img_background{ width: 300p...原创 2020-02-29 15:52:45 · 1755 阅读 · 1 评论 -
display:flex；弹性布局
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项...原创 2018-11-12 11:13:32 · 195 阅读 · 0 评论 -
自定义滚动条样式-transition无效
问题需求是自定义滚动条样式，然后2秒内无操作隐藏滚动条。2s内隐藏比较麻烦，不能用css实现，只能监听容器的touch事件，然后给滚动条加个opacity: 0的class。.class::-webkit-scrollbar{ width: 10px; -webkit-transition: all 1s; transition: all 1s;}.class::-we...原创 2018-11-14 15:39:41 · 2175 阅读 · 1 评论 -
web前端入门
按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别，初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理（比如说在IE浏览器中的createElement有什么不同等等内容），现在基本上每个公司在招聘的时候都会要求熟练html5, css3, javascript，这个熟练的意思就是信手拈来。在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处...原创 2018-11-14 15:44:28 · 133 阅读 · 0 评论 -
前端编码规范
为了统一代码风格，提高代码的可读性和可维护性，特制定此编码规范。统一规则变量命名使用英文单词，不允许使用汉语拼音。代码块缩进使用 4 个空格，不建议使用 Tab 键缩进。文件名不允许使用中文字符，建议文件名仅包含大小写字母、数字、英文中划线（-）和英文下划线（_）。在使用某个文件的时候，在代码中必须准确的使用该文件的名称，大小写要正确。因为开发环境是 Windows 的同学，系统本身对于...原创 2018-11-14 16:07:39 · 187 阅读 · 0 评论 -
CSS3 中的 rem 值与 px 之间的换算
bootstrap默认 html｛font-size: 10px;}rem是一个相对大小的值，它相对于根元素，比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。然后其他的字体就是将你要的值除以14得到的值；比如默认的twentytwelve主题大小是960px；换算成rem就是960/14=68.57142857142857rem；...原创 2018-11-15 10:18:07 · 216 阅读 · 0 评论 -
CSS 技巧：display设置元素为行内元素时，元素之间存在间隙问题
在使用display将元素设置为行内元素的同时(例如：inline、inline-block等)，将margin全部设置为0，padding全部设置为0的时候，我发现了元素之间居然还存在着间隙???原因之所以存在间隙是由于元素标签之间留有空白字符造成的。解决方案1、第一种消除元素标签之间的空白字符，把标签连在一起。2、第二种：第一步：在这些行内元素的父元素上设置font-size...原创 2019-02-26 09:53:49 · 522 阅读 · 0 评论 -
CSS 属性：Display属性
一、display属性介绍display 属性规定元素应该生成的框的类型。以下是一些关于display比较常用的属性值：其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。二、display:none将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失...原创 2019-02-26 10:44:52 · 367 阅读 · 0 评论 -
中间文字，两边横线（纯css实现）
遇到了一个中间文字，两边横线的布局，效果如下图：第一种方法：使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘工商信息’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现第二种方法：vertical-align 的属性就会发现有length 和 % 两个属性第三种方法：使用css伪类具体代码如下： <!DOCTYPE html PUBLIC "-//...原创 2019-08-13 09:34:09 · 2145 阅读 · 0 评论 -
css：a:visited限制
:active对于:active伪类可以在div上生效。没有限制:visited使用限制:visited只适用于带href的a标签。如果给a标签绑定了click事件，那跳转的url必须跟href保持一致，才能让visited生效a:visited {color: #aaa;}:visited样式限制大体意思就是，只准写color。rgba，hsla等等都不能用。本来是想写个透明度...原创 2018-11-14 15:34:20 · 1497 阅读 · 0 评论