- 背景这一切都要从一次磨砂效果说起，之前做手机屏幕特效，主控按键的指纹效果，是真没有方向。后来想老款手机带软膜的，有点磨砂的感觉，所以我想到用滤镜功能实现它。CSS有个专门的属性实现滤镜效果，那就是filter。 filter属性来让filter属性show一波PS特技，上特效了。滤镜效果不同的滤镜效果通过定义filter不同的属性值便可以实现。类型效果展示实现方案曝光filter: brig... 背景这一切都要从一次磨砂效果说起，之前做手机屏幕特效，主控按键的指纹效果，是真没有方向。后来想老款手机带软膜的，有点磨砂的感觉，所以我想到用滤镜功能实现它。CSS有个专门的属性实现滤镜效果，那就是filter。 filter属性来让filter属性show一波PS特技，上特效了。滤镜效果不同的滤镜效果通过定义filter不同的属性值便可以实现。类型效果展示实现方案曝光filter: brig...
- 背景最近睡前习惯翻会书，重温了《HTML5与CSS 3权威指南》。这本书，分上下两册，之前读完了上册，下册基本没翻过。为了对得起花过的每一分钱，决定拾起来近期读一读。 CSS 选择器在CSS3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然 ，修改起来也很方便。可能是秋季的清爽，又或者藕粉的甜蜜，感觉自己开了「神行千里」的buff，这章读... 背景最近睡前习惯翻会书，重温了《HTML5与CSS 3权威指南》。这本书，分上下两册，之前读完了上册，下册基本没翻过。为了对得起花过的每一分钱，决定拾起来近期读一读。 CSS 选择器在CSS3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然 ，修改起来也很方便。可能是秋季的清爽，又或者藕粉的甜蜜，感觉自己开了「神行千里」的buff，这章读...
- 前言 随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。简洁大方的登录注册页面演示 编辑 这是一款使用 Tailwind CSS 制作的目前常见的登陆界面，采用左右两栏布局，左边是背景图和文字介... 前言 随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。简洁大方的登录注册页面演示 编辑 这是一款使用 Tailwind CSS 制作的目前常见的登陆界面，采用左右两栏布局，左边是背景图和文字介...
- 前言 随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。简洁大方的登录注册页面演示 编辑 这是一款简洁的登录注册页面，分为左右两栏，左边是表单，设计了微信、微博登录按钮，或者使用电... 前言 随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的登录注册页面，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方。简洁大方的登录注册页面演示 编辑 这是一款简洁的登录注册页面，分为左右两栏，左边是表单，设计了微信、微博登录按钮，或者使用电...
- CSS Position(定位)position 属性指定了元素的定位类型。position 属性的五个值：relativefixedabsolutesticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。1、static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静... CSS Position(定位)position 属性指定了元素的定位类型。position 属性的五个值：relativefixedabsolutesticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。1、static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静...
- CSS padding（填充）CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。属性说明padding使用简写属性设置在一个声明中的所有填充属性padding-bottom设置元素的底部填充padding-left设置元素的左部填充padding-right设置元素的右部填充padding-top设置元素的顶部填充padding（填充）当... CSS padding（填充）CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。属性说明padding使用简写属性设置在一个声明中的所有填充属性padding-bottom设置元素的底部填充padding-left设置元素的左部填充padding-right设置元素的右部填充padding-top设置元素的顶部填充padding（填充）当...
- 什么是CSS margin(外边距)？CSS margin(外边距)属性定义元素周围的空间。属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。marginmargin 清除周围的（外边框）元素区域。margi... 什么是CSS margin(外边距)？CSS margin(外边距)属性定义元素周围的空间。属性描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。marginmargin 清除周围的（外边框）元素区域。margi...
- CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。编辑1、边框样式边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式编辑2、边框宽度您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它... CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。编辑1、边框样式边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式编辑2、边框宽度您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它...
- 1、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：编辑不同部分的说明：Margin(外边距) - 清除边... 1、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：编辑不同部分的说明：Margin(外边距) - 清除边...
- 所有CSS字体属性属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。1、字体系列font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一... 所有CSS字体属性属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。1、字体系列font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一...
- 所有CSS文本属性：属性描述color设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本... 所有CSS文本属性：属性描述color设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本...
- CSS 创建 HTML相当于一个页面的结构，CSS相当于页面的装饰，浏览器当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)1、外部样式表当样式需要应用于很多页面时，外部样式表将是理想... CSS 创建 HTML相当于一个页面的结构，CSS相当于页面的装饰，浏览器当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)1、外部样式表当样式需要应用于很多页面时，外部样式表将是理想...
- CSS Id 和 Class选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":实例<div id="para1"></div>... CSS Id 和 Class选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":实例<div id="para1"></div>...
- CSS 语法实例<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>body {background-color:yellow;}h1 {font-size:36pt;}h2 {color:blue;}p {margin-left:50px;}</sty... CSS 语法实例<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>body {background-color:yellow;}h1 {font-size:36pt;}h2 {color:blue;}p {margin-left:50px;}</sty...
- 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、... 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、...
上滑加载中
推荐直播
-
HDC深度解读系列 - AI时代的华为开发者空间2025/07/24 周四 16:30-18:00
Edwin 华为开发者空间产品总监 姚圣伟 HCDG天津核心组代表&HCDE
继HDC发布开发者空间新特性后，本期直播聚焦华为开发者空间核心升级，邀您一起深度解读其如何赋能AI时代智能应用开发，解锁开发新体验
回顾中 -
OpenHarmony生态构建2025/07/24 周四 19:00-20:00
王天一、聂嘉一 -华为开发者布道师-高校学生
本次直播将结合讲师的实践经验，深入剖析OpenHarmony开发中的核心痛点与难点，展示从入门到进阶的多层次开发案例，并分享高效的学习路径、实用开发技巧和常见问题的解决方案。同时，我们还将探讨OpenHarmony的生态建设，解析测试规范与开发实践，帮助开发者更好地适配多设备，共同推动OpenHarmony生态的发展。
回顾中
热门标签