css
关注
分享
扫一扫
sunddy_x
无限进步
展开
-
CSS选择器学习与使用
CSS中，用来指定网页上我们想要样式化的HTML元素。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象。原创 2023-02-05 15:35:46 · 1199 阅读 · 0 评论 -
animate.css的使用
前言Animate.css是一个现成的跨浏览器动画库，此处采用的是v4版本，v3.x 及以下更新之前参考官网的迁移指南。安装使用安装使用npm安装：npm install animate.css --save使用yarn安装：yarn add animate.css将其导入你的文件：import 'animate.css';或者使用 CDN 将其直接添加到你的网页<head> <link rel="stylesheet" href="https://cdnj原创 2022-01-25 18:18:58 · 729 阅读 · 0 评论 -
css3边框颜色渐变
前言边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：好看！好看！还是TM的好看！OK，那么话不多说，直接进入正文。正文首先，对边框的颜色测试了线性渐变函数，发现果然是不支持的伪类这里选择使用伪类元素来实现效果代码如下.btn { position: relative; color: #23b7cb; font-size: 15px; padding: 5px 15px原创 2021-09-10 12:00:33 · 1993 阅读 · 0 评论 -
CSS元素旋转3D显示
html代码<div class="box"> <div class="main"></div></div>css代码.box { position: relative; width: 200px; height: 200px; border: 1px solid red; /* 3D变形 */ transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-pers.原创 2021-07-08 11:43:52 · 209 阅读 · 0 评论 -
CSS设置文本溢出显示省略号
单行文本overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;使用 -webkit-line-clamp 来设置行数原创 2021-07-08 10:52:46 · 153 阅读 · 0 评论 -
css3实现毛玻璃效果
backdrop-filter属性允许我们对元素后面的内容进行过滤，完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .image { position: relative; width: 40%; } .im...原创 2021-05-27 11:02:47 · 1205 阅读 · 0 评论