前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

前端笔记(近期整理的一些开发备注)

js点击下载文件

//点击下载文件写法
const w = window.open('about:blank');
w.location.href='文件url'

PC端中px转vw与vh,sass写法

CSS3新特性:让前端设计更加生动和实用

CSS3是CSS(层叠样式表)技术的最新进化,它为Web开发人员提供了强大的新工具和功能,这些新特性使得创建复杂、富有动感的设计成为可能。在本文中,我们将探索CSS3中的一些最受欢迎和最有用的新特性,并讨论它们如何改变我们开发和设计网站的方式。

圆角(Border-radius)

CSS3引入的border-radius属性允许开发者轻松创建圆角元素,而不再需要使用图片或其他复杂的工作流程。这个属性可以应用于任何可见元素,只需要一行代码就可以实现。

《CSS揭秘》读书笔记-条纹背景(二)

垂直条纹

水平条纹是最容易用代码写出来的,但用户在网页上看到的条纹图案很多都不是水平的。

图形处理:给 Canvas 文本填充线性渐变

前言

在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。

猜想与答案

给出两个答案:

正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图:

(图来源:Do you really know CSS linear-gradients)

分享一款史上最没用的CSS库chinese-gradient

chinese-gradient是一款利用CSS自定义属性来制作的中文渐变色CSS库,由于各式各样、五彩斑斓的渐变色千变万化,再加上许多英文过于抽象十分难记,于是就有了这款中文属性库。

该库使用方式也是十分的简单,只需要把你原来写的 background: xxx; 替换为 background: var(--xxx); 即可。

HTML5+CSS3图片倒影技术实现及原理

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(VendorPrefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

实现倒影的基本语法

实现倒影的基本语法非常的直观,假设我们想给下面的图片增加倒影效果,可以这样写:

前端CSS面试题-4(高级前端css面试题)

16-如何使用 CSS 网格创建响应式布局

CSS 网格是一个功能强大的布局系统,使您能够创建复杂且响应灵敏的基于网格的布局。通过定义网格容器和网格项,您可以轻松地按行和列排列元素。这是一个例子:

<< 1 >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言