随笔分类 - CSS
摘要：很多Web前端工程师肯定都会遇到过，在项目中，UI设计师跑来跟你说，我这个地方的表单控件需要设计成这个样子那个样子。但是用CSS却不能够修改这些控件的默认样式，于是乎，只能通过div+javascript技术来进行模拟。特别是在如今移动端的崛起时代，更加注重用户的体验。于是就更加需要这样一种hack
阅读全文
摘要：现在的网页设计中，饼图的运用极为普遍。如：简单的统计图表，进度指示器，定时器等等。饼图的技术实现方式也非常多，主要是使用JavaScript配合canvas来实现，从而诞生了一大批的图表绘制JS库。但是单纯使用CSS来实现饼图的技术还是在CSS3推出后才开始出现。 今天就来讲讲基于transform
阅读全文
摘要：梯形标签页是一种很常见的网页设计风格 然而现实中大部分实现方案都是利用伪元素来实现两边不平行的线条。 这种方式的弊端就在于可扩展性差，比如添加一圈边框，一层纹理背景，顶部设置圆角等。 今天就来介绍几种合理的解决方案 一、3D变换 当一个元素进行翻转时，如果加上景深perspective属性后会出现近
阅读全文
摘要：clip-path表示剪裁路径，也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。 这里涉及到两个概念: 裁剪路径clipping path，裁剪区域clipping region。 裁剪路径就是用来裁剪元素的路径，标记了需要裁剪的区域。可以是任意形状。 裁剪区域就是裁剪
阅读全文
摘要：将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient
阅读全文
摘要：场景: 设计师设计了一个菱形区域用来展示图片 与平行四边形一节类似，可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。 方案一实现效果: 由于图片的宽度与容器的宽度一致，所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的
阅读全文
摘要：目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px 解决方案: 1. 常规的解决方案可能是设置一圈透明边框。 border: 10px solid transparent; 2. 但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用background-clip属
阅读全文
摘要：鼠标指针可以用来告诉用户当前可以执行什么动作 目前已有的内置光标种类有: zoom-out 介绍几种常用光标 1. 提示禁用状态 not-allowed用于提示某个控件因为某种原因无法进行交互，常常用于表单 :disabled, [disabled], [aria-disabled='true']{
阅读全文
摘要：难点 普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。 场景: 1. 半透明图像，背景图像，border-image 2
阅读全文
摘要：背景知识 box-shadow 第三个参数是模糊半径，使用高斯模糊算法进行模糊处理。本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模糊半径的两倍。 第四个参数是扩张半径，会根据指定的值扩大或者缩小投影的尺寸。宽度和高度分别扩张或者减少两倍的扩张半径。 单侧投影 如果给一个负的扩张半
阅读全文
摘要：大自然中的事物都不是以无限平铺的方式存在的，如果想让事物营造一种自然随机性，那么就需要使用一种伪随机的技巧。 当你注意到一个有辨识度的特征在以固定的规律循环重复时，那么它视图营造的自然随机性就会立刻崩塌。 如何产生一种真实的随机条纹呢，这就需要先了解什么叫做最大公倍数以及质数。 如果有多层图案，并且
阅读全文
摘要：这一篇是接着上一篇[CSS揭秘]条纹背景来继续讲解CSS渐变的强大之处 背景知识 linear-gradient radial-gradient repeating-linear-gradient repeating-radial-gradient 使用CSS渐变创建任何种类的几何图案几乎都是可能的
阅读全文
摘要：背景知识 线性渐变 linear-gradient 不管是线性渐变，还是径向渐变。它们都是用来设置元素的背景图像。 background-image属性可以为一个元素设置一个或者多个背景图像。这些图像在绘制过程中，以Z方向堆叠的方式进行，也就是先指定的图像会在后指定的图像上面绘制，也就越接近用户。元
阅读全文
摘要：背景知识：border-image, gradient, 多重背景，CSS动画 背景知识讲解 1. border-image 边框应用背景图片，图片会自动被分割为四等分，分别用于四个边框。使用border-image属性时，会替换掉border-style属性设置的边框样式。如果boder-imag
阅读全文
摘要：技巧：通过变形属性对容器的形状进行变形，但是保持其内容不变形。 场景：通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。 有几套备选方案： 1. 嵌套元素方案 外部容器元素进行skew()变形，再对内部内容区域元素进行一次反向的skew()变形，这样内容区域会保持原来的形状。 2. 伪
阅读全文
摘要：技巧：利用border-radius属性产生圆，椭圆等形状 border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-rad
阅读全文
摘要：技巧：通过一个DIV标签实现边框内圆角效果 背景知识：box-shadow, outline, “多重边框” 背景知识讲解 1. box-shadow box-shadow以逗号分隔列表来描述一个或多个阴影效果，几乎可以用在任何元素上(英文all elements. it also applies
阅读全文
摘要：技巧：可以随意的摆放背景图片的位置 背景知识：在CSS2.1时代，我们只能通过background-position设置图片相对于容器左上角的偏移量，这样当容器的尺寸不固定时，只能近视使用百分比实现。那么在CSS3时代，我们有了更好的解决方案。 CSS3时代，background-position属
阅读全文
摘要：技巧：实现一个半透明的边框 预备知识 background-clip background-clip 设置元素背景是否延伸到边框下面，如果没有设置背景颜色或者图片，那么这个属性只有在边框设置为透明或者半透明时才能看到视觉效果。否则这个属性造成的样式变化会被元素边框所覆盖。 默认值为 border-b
阅读全文
摘要：记：本文可以作为张老师在慕课网上讲解课程的学习笔记 定义 padding：通过查MDN文档可知 the padding property sets the padding space on all sides of an element. The padding ares is the space
阅读全文
浙公网安备 33010602011771号