随笔分类 - css样式
摘要：
当年这可能是一个典型的CSS面试题：“两列布局”。很多年前（大约是10年前吧），有过这样的一个面试题： 两列布局，左侧列宽度是20%，右侧列是80%，两列之间的间距是20px，CSS怎样实现这样的一个布局，而且不会出现滚动条！ 对于题主这个问题，早在当年可能会较为蛋疼一点，或许很多开发者会采用 Ja
阅读全文
当年这可能是一个典型的CSS面试题：“两列布局”。很多年前（大约是10年前吧），有过这样的一个面试题： 两列布局，左侧列宽度是20%，右侧列是80%，两列之间的间距是20px，CSS怎样实现这样的一个布局，而且不会出现滚动条！ 对于题主这个问题，早在当年可能会较为蛋疼一点，或许很多开发者会采用 Ja
阅读全文
摘要：
在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效
阅读全文
在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效
阅读全文
摘要：
一、“切图”的局限性 传统的“切图”简单暴力，但往往缺少适应性。 适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。 举个例子，有这样一个优惠券样式 关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧 不过这里略微不一样的地方是，两个凹陷处都是平滑处理的 单纯实现内凹圆
阅读全文
一、“切图”的局限性 传统的“切图”简单暴力，但往往缺少适应性。 适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。 举个例子，有这样一个优惠券样式 关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧 不过这里略微不一样的地方是，两个凹陷处都是平滑处理的 单纯实现内凹圆
阅读全文
摘要：
最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组
阅读全文
最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组
阅读全文
摘要：
在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS
阅读全文
在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS
阅读全文
摘要：
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍
阅读全文
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍
阅读全文
摘要：
问题： 如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。 解决方法： 要让
阅读全文
问题： 如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。 解决方法： 要让
阅读全文
摘要：
一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle） 设置盒子的斜切 perspective 设置透视距离 transform-styoleflat
阅读全文
一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle） 设置盒子的斜切 perspective 设置透视距离 transform-styoleflat
阅读全文
摘要：
在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后
阅读全文
在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后
阅读全文
摘要：
1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we
阅读全文
1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we
阅读全文
摘要：
要使用 CSS 美化被选中的文字，可以使用 ::selection 伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。 例如，要将被选中的文本的背景色设置为黄色，可以使用以下 CSS 代码： ::selection { background-
阅读全文
要使用 CSS 美化被选中的文字，可以使用 ::selection 伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。 例如，要将被选中的文本的背景色设置为黄色，可以使用以下 CSS 代码： ::selection { background-
阅读全文
摘要：
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo
阅读全文
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo
阅读全文
摘要：
在实现更加立体的阴影效果前，需要了解一下 CSS 阴影基础。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow - 盒阴影 text-shadow - 文字阴影 filter: drop-shaodw() - 滤镜内的阴影 关于它们的基础语法和使用就不过多描述，这
阅读全文
在实现更加立体的阴影效果前，需要了解一下 CSS 阴影基础。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow - 盒阴影 text-shadow - 文字阴影 filter: drop-shaodw() - 滤镜内的阴影 关于它们的基础语法和使用就不过多描述，这
阅读全文
摘要：
01、页面动画出现闪烁 在Chrome and Safari浏览器中，在使用transforms或者animations这类过渡属性和动画的时候可能会出现页面的闪烁情况那此时我们就可以使用一下代码来尝试回避。 .cube { -webkit-backface-visibility: hidden;
阅读全文
01、页面动画出现闪烁 在Chrome and Safari浏览器中，在使用transforms或者animations这类过渡属性和动画的时候可能会出现页面的闪烁情况那此时我们就可以使用一下代码来尝试回避。 .cube { -webkit-backface-visibility: hidden;
阅读全文
摘要：
在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样： 一、CSS 滤镜实现 使用滤镜对文字单独处理，所以需要额外一层标签。然后容器和文字用同一种颜色表示，目的是让文字颜色和背
阅读全文
在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样： 一、CSS 滤镜实现 使用滤镜对文字单独处理，所以需要额外一层标签。然后容器和文字用同一种颜色表示，目的是让文字颜色和背
阅读全文
摘要：
渐变色边框 如果我们前端最亲爱的UI设计师，让我们给盒子绘制一个渐变色的边框，而且盒子的宽高还需要随着内容变化而变化，那我们就不能通过切图来解决问题，所以我们可以这么说： 但是我相信优秀的你肯定不会说做不了，所以我下面列举三种方案来帮你排忧解难： 1、 border-image（看需求） 该属性与b
阅读全文
渐变色边框 如果我们前端最亲爱的UI设计师，让我们给盒子绘制一个渐变色的边框，而且盒子的宽高还需要随着内容变化而变化，那我们就不能通过切图来解决问题，所以我们可以这么说： 但是我相信优秀的你肯定不会说做不了，所以我下面列举三种方案来帮你排忧解难： 1、 border-image（看需求） 该属性与b
阅读全文
摘要：
一、介绍 最近在一个项目的宣传页中，设计师使用了文字描边效果，之前我确实没有实现过文字的描边效果，然后我在查阅资料后，知道了实现方法。文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。 二、具体代码 1、文字内外双
阅读全文
一、介绍 最近在一个项目的宣传页中，设计师使用了文字描边效果，之前我确实没有实现过文字的描边效果，然后我在查阅资料后，知道了实现方法。文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。 二、具体代码 1、文字内外双
阅读全文
摘要：
css文字渐变色 background-image: linear-gradient(to right, #ce25c0, #d6e56e, #ee2cb3, #deae42); -webkit-background-clip: text; color: transparent; display:
阅读全文
css文字渐变色 background-image: linear-gradient(to right, #ce25c0, #d6e56e, #ee2cb3, #deae42); -webkit-background-clip: text; color: transparent; display:
阅读全文
摘要：
今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！ 实现思路 先来看看一些主流网站是如何实现置灰的： BiliBili： image.png 淘宝： image.png 京东： image.png 掘金： 可以看到，这些网站实现置灰的方式不太一样，但都大同小异。本质上都是使用了 CSS
阅读全文
今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！ 实现思路 先来看看一些主流网站是如何实现置灰的： BiliBili： image.png 淘宝： image.png 京东： image.png 掘金： 可以看到，这些网站实现置灰的方式不太一样，但都大同小异。本质上都是使用了 CSS
阅读全文
摘要：
canvas 新元素 新多媒体元素 新的语义和结构元素 HTML5提供了新的元素来创建更好的页面结构：
阅读全文
canvas 新元素 新多媒体元素 新的语义和结构元素 HTML5提供了新的元素来创建更好的页面结构：
阅读全文
