×

css

肝了一宿才收集的48个超炫酷的 CSS 文字特效,绝对值得收藏!!!(一些好玩的css特效)

夏至未至 夏至未至 发表于2024-04-20 浏览16639 评论0
一、实现线性渐变的文字 实例描述:在网页制作时,可以通过对文字颜色的设置来实现网页的特殊效果。本实例将使用 CSS3 实现文字线性渐变的效果。运行实例,在页面中会输出一串线性渐变的文字 人生苦短,我用Python,结果如下图所示:技术要点:本实例主要使用了 CSS3 中的 linear-gradient() 函数,该函数用于创建一个线性渐变的图像。语法格式如下: background:linear-gradient(direction, color-stop1, color-sto

css

css圆角边框怎么设置(css圆角边框怎么设置颜色)

20688 20688 发表于2024-04-19 浏览6673 评论0
css+div是页面设计的法宝,通过css+div能够设计出各种效果!本文给大家简单介绍下css圆角边框怎么设置,大家可以参考,也可以直接拿过去使用,当然要修改下具体的参数。 border-radius 属性可以接受一到四个值。规则如下:圆角边框(border-radius)的基本用法:border-radius 属性是一个简写属性,用于设置四个圆角的属性。 圆角边框的最基本用法就是设置四个相同弧度的圆角。 四个值 - border-radius: 15px 50px 30px 5px;(

css

Css 弹性布局(Flex)详细介绍(Flex 属性详解、场景分析)

HYH HYH 发表于2024-04-17 浏览23195 评论0
目录​​​​​​​ 前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-items flex-wrap 场景三 前言 我们知道,网页展示就好比一个个盒子堆叠在一起,通过调整盒子的大小、位置、样式等,形成了各式各样的页面。当我们在开发一个页面的时候,我们常规的做法可能是:搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 布局排

css

【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案(uniapp组件修改样式无效)

huahua23 huahua23 发表于2024-04-17 浏览7719 评论0
在使用uniapp框架开发微信小程序时,使用到了uni-ui的uni-table组件。由于需要修改表头的背景色,于是乎在微信开发工具中使用调试工具审查元素获取其class名: 尝试直接在页面中修改样式: .uni-table-th { background-color: #ddd; } 结果无效。于是尝试使用深度选择器 ::v-deep .uni-table-th { background-color: #ddd; } 依然无效。然后查询微信平台官方开发文档得知,微信中的组件存在

css

CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距

忽然之间 忽然之间 发表于2024-04-16 浏览13997 评论0
场景 Flex是Flexible Box的缩写,意为”弹性布局”。 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。 实现如下类似布局   最外层是是一个div,div里面是上面一个照片,下面一个表单,这两个元素居中排列。 注: 博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、外层div设置样式 .login {   display: flex

css

el-table fixed固定列导致错位的解决方案

752557pk 752557pk 发表于2024-04-16 浏览6372 评论0
点击上方“青年码农”关注 回复“特效源码”可获取各种资料 Element UI table组件可以通过设置fixed属性实现列的固定,但是在某些情况下会导致固定列的样式错乱,下面就总结下解决样式错乱实现方案 1.doLayout(官方提供) 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法。 2.<el-table>标签上加一个class="table-fixed" 这个通过设置优先级覆盖内联样式

css

css之 vertical-align用法详解

马斯 马斯 发表于2024-04-15 浏览8517 评论0
基本知识 vertical-align 属性设置元素的垂直对齐方式。 css中的vertical-align 属性只能用于 行内元素 和 置换元素(例如 图像和表单输入框) ,此属性不继承。 接下来我们用例子去分析这些值的意思及产生的效果: 首先我们先看一张图,文字的顶线、中线、基线,基线是字母x的下边缘 默认例子 <style> * { margin: 0; padding: 0; } div { width: 200p

css

css的rotate3d实现炫酷的圆环转动动画

✎﹏ℳ๓₯㎕ ✎﹏ℳ๓₯㎕ 发表于2024-04-15 浏览5412 评论0
1.实现效果 2.实现原理 2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。 语法: rotate3d(x, y, z, a) 含义: x 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。 y 类型,可以是 0 到 1 之间的数值,表示旋转轴 Y 坐标方向的矢量。 z 类型