-
解决display:flex属性 justify-content: space-between换行后的排版问题
所属栏目：[系统] 日期：2020-05-12 热度：128
display:flex属性 justify-content: space-between换行后的排版问题 style.wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐，子元素之间有间隙*/flex-flow: row wrap;/*子元素溢出父容器时换行*[详细]
-
纯css实现动态边框的示例代码
所属栏目：[系统] 日期：2020-05-12 热度：85
副标题#e# 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添[详细]
-
详解CSS Masking模块之Clipping
所属栏目：[系统] 日期：2020-05-12 热度：143
副标题#e# 最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask 和 clip-path 来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于 mask 的相关特性理解的还[详细]
-
移动端rem布局的两种实现方法
所属栏目：[系统] 日期：2020-05-12 热度：173
据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一[详细]
-
用CSS遮罩实现过渡效果的示例代码
所属栏目：[系统] 日期：2020-03-30 热度：182
副标题#e# 今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样，遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中，我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣[详细]
-
浅谈CSS中盒模型的理解
所属栏目：[系统] 日期：2020-03-30 热度：140
今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （ 摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完善，对大家有帮助 ） 1.基本的盒模型知识 CSS css盒子模型 又称框[详细]
-
CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法
所属栏目：[系统] 日期：2020-03-30 热度：114
大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实现了，还不赶紧去求谷哥，度娘。 实现内倒角 上代码，然后解释代码 div class=radial-gradient/d[详细]
-
如何只在IE上加载CSS样式表
所属栏目：[系统] 日期：2020-03-30 热度：100
前言：IE一直是特殊的一个浏览器，我们可以使用一些方法来指定样式表只在IE浏览器下被加载。 IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表。如下所示，使用外部样式表。 !--[if IE] link rel=stylesheet type=text/css href=http://w[详细]
-
css 11种方法实现一个tips带有描边的小箭头
所属栏目：[系统] 日期：2020-03-30 热度：146
副标题#e# 我们在网页开发中实现一个tips时会有一个小箭头，实现这种方法的文章网上已经泛滥了，但有时实现这个小箭头不止只有单纯的三角它还有描边，今天我们就借那些现有的文章在深入一点来说说如何给tips小箭头描边，本章不涉及svg/canvas，没必要因为我[详细]
-
使用CSS的border属性绘制各种几何形状的方法
所属栏目：[系统] 日期：2020-03-30 热度：180
副标题#e# border 边框属性可以说是我们在网页布局中最常用不过的一个属性之一。 border 它不只是边框，它还有很多非常有用的黑魔法哈，让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个简单的小例子： 在页面上写一个 div div class=borde[详细]
-
css3 flex实现div内容水平垂直居中的几种方法
所属栏目：[系统] 日期：2020-03-30 热度：199
副标题#e# 一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶对齐） ※ flex-direction:column-reverse （与column[详细]
-
css3媒体查询中device-width和width的区别详解
所属栏目：[系统] 日期：2020-03-30 热度：52
定义：定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。 比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。 2.width 定义[详细]
-
CSS 漂亮搜索框美化代码
所属栏目：[系统] 日期：2020-03-30 热度：124
效果图： 实现这种效果有两种方法：一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。 文中用到的图片 提示：您可以先修改部分代码再运行[详细]
-
css3 中translate和transition的使用方法
所属栏目：[系统] 日期：2020-03-30 热度：184
translate和transition一直让我觉得，很牛皮很强大，怎么也学不会，其实是自己比较抗拒去了解她，接口看了不到半个小时的文档，大概了解了下，下面是示例，可以下载下来自己运行下试试 !DOCTYPE htmlhtmlhead titletranslate和transition/title/headbodyst[详细]
-
浅析CSS3 中的 transition，transform，translate之间区别和作用
所属栏目：[系统] 日期：2020-03-30 热度：95
transform 和 translate transform指变换、变形，是css3的一个属性，和其他width，height属性一样 translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 例如： transfo[详细]
-
css3 给背景设置渐变色的方法
所属栏目：[系统] 日期：2020-03-29 热度：94
css 给网页中的背景设置渐变色，css的渐变颜色可以指定固定的两个颜色之前的线性过度，这个css3属性只支持高版本的浏览器。 //浏览器前缀background: linear-gradient(red, blue);background: -webkit-linear-gradient(red, blue);background: -o-linear-g[详细]
-
浅谈只要css就能实现的骨架屏方案
所属栏目：[系统] 日期：2020-03-29 热度：165
线上体验地址 https://jsfiddle.net/z13wtr0q/ 先说优缺点，毕竟骨架屏实现的方案有很多种 优点 简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护 定制程度高，想怎么搞就怎么搞 不臃肿，只给你想要的 缺点 自动化程度低，需要在骨架dom[详细]
-
CSS Hack整理
所属栏目：[系统] 日期：2020-03-29 热度：140
CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3([详细]
-
详解CSS外边距折叠引发的问题
所属栏目：[系统] 日期：2020-03-29 热度：94
第一种：两个块级元素的上下边距折叠 第二种：父元素和子元素（或者最后一个元素）的外边距 第三种：空的块级元素的上下外边距 折叠的根本原因： margin之间直接接触，没有阻隔 折叠后外边距的计算： 1.如果两个外边距都是正值，折叠后的外边距取较大的一[详细]
-
CSS网页布局中ID与class的理解
所属栏目：[系统] 日期：2020-03-29 热度：100
XHTML CSS网页布局中ID与class的理解应用： 要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是，凡事都应该带着OO的思想来看问题，也勉强可以凑数拉。其实，早在零几年就有人提出了OO-style，不过已找不到。 那要怎样OO呢？现在大家都知道CSS是可以[详细]
-
Css实现手机端页面强制横屏的方法示例
所属栏目：[系统] 日期：2020-03-28 热度：175
@media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 100vmin;height : 100vmax;}#gyroContain{width : 100vmax;height : 100vmin;transform-origin: top left;transform: rotate(90deg) translate(0,-100vm[详细]
-
CSS大师Eric采访实录
所属栏目：[系统] 日期：2020-03-28 热度：66
自从学习、实践CSS以来，问题层出不穷，实在是自己学习的太肤浅，对CSS的理解也不够。 本篇摘录一段对CSS大师Eric的采访记录，希望加深认识，准备重拾对CSS的学习劲头。 关于作者和此篇采访 原文于2004年4月21日采访，载于webstandardgroup.org由国内CSS的[详细]
-
CSS网站布局技巧几则总结
所属栏目：[系统] 日期：2020-03-28 热度：132
1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请见。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错[详细]
-
Web标准:结构,表现和行为分离
所属栏目：[系统] 日期：2020-03-28 热度：179
Web标准：讨论内容结构表现行为分离 内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div cssxhtml css纯代码的分离，思想上流程上，到底如何分离？ 古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它[详细]
-
详解css透明度之rgba和opacity的区别及兼容
所属栏目：[系统] 日期：2020-03-28 热度：131
对于设置透明度，我们有两个可以选的css3属性：rgba 和 opacity opacity 用法： #box{background-color:rgb(125,25,0);opacity: 0.5} IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设定透明度。 opacity 属性能够设置的值从 0.0 到 1.0。值越[详细]
