当前位置: 首页 > news >正文

CSS特殊样式

CSS 中的特殊样式设置

做一个三角形

利用边框属性制作一个三角形

.box{
	width: 0px;
	border-top: 100px solid transparent;
	border-bottom: 100px solid yellow;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
}
  • transparent代表透明色
  • 需要注意的是:border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式

设置文本溢出

文本溢出隐藏,超出部分显示…或者截取,前提必须有宽度

  • 单行文本:
CSS: {
	width: ___px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

截取为clip;

  • 多行文本:
CSS: {
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:2;
	display:-webkit-box;
	-webkit-box-orient:vertical;
}

使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端

  1. -webkit-line-clamp 用来限制在一个块元素显示的文本的行数
    为了实现该效果,它需要组合其他的WebKit属性
    常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

设置元素隐藏

  • display: none
    设置元素的显示模式
    1、该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM树空间
    2、无法进行事件监听,不可点击
    3、动态修改该属性会造成重排,性能较差
    4、非继承性属性!设置了该属性的元素的子元素即使设置display:block依然不会显示它的子元素
    5、transition不支持display的显示隐藏动画效果,但是display:none不会影响animation的动画效果!

  • visibility:hidden
    设置元素是否可见
    1、设置该属性的元素依然在DOM中,会被浏览器渲染,占据DOM树空间
    2、但它无法被监听,因此不可点击
    3、动态修改该属性会引成重绘,性能较display:none高
    4、继承性属性!设置该元素的子元素如果修改visibility值是可以显示该子元素的!
    5、transition支持该属性

  • opacity:0
    设置元素的透明度 从0.0(完全透明)到1.0(完全不透明)
    1、占据空间,仅仅是设置透明度让该元素不可见
    2、可以被监听,可以点击
    3、动态修改不会造成重绘和重排,性能较高!
    4、非继承性属性!设置该属性元素的子元素若设置opacity:1依然无法显示
    5、可以配合transition显示淡入淡出效果

  • transform:scale(0)

  • height:0px;

  • position:
    z-index: -1

设置鼠标手势

cursor:

	设置显示的光标的类型(形状)
	default		默认光标(通常是一个箭头)
	auto		默认浏览器设置的光标
	crosshair	呈现为十字线
	pointer		呈现为指示链接的指针(一只手)
	move		此光标指示某对象可被移动

阻止:hover、:active 等鼠标行为状态的触发

css 选择器
	pointer-events: none;

设置带弧度的梯形

.box {
	width: 100px;
	height: 25px;
	text-align: center;
	color: #fff;
	position: relative;
}
.box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	transform-origin: left top;
	background-color: brown;
	transform: perspective(1em) rotateX(-7deg);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

相关文章:

  • ssm入门
  • 两句话,ChatGPT帮我写一个打飞机的游戏
  • [论文解析] Cones: Concept Neurons in Diffusion Models for Customized Generation
  • formily实践经验和踩坑
  • 论文题目<mark>
  • Linux基础操作 常用命令 Centos
  • async 与 await
  • 深入理解【正则化的L1-lasso回归和L2-岭回归】以及相关代码复现
  • Linux内核设计与实现第四章学习笔记
  • <c++> 四、模板初阶
  • 两种编程思维
  • 图书馆管理系统(Java编写,思路及源代码)
  • 算法练习:动态规划(最长公共子串问题)
  • 【lm401】解决malloc动态申请内存时内存不足的问题
  • 【Python】ChineseCalendar包简介
  • “大数据应用场景”之隔壁老王(连载四)
  • 2017 年终总结 —— 在路上
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • Electron入门介绍
  • Golang-长连接-状态推送
  • input实现文字超出省略号功能
  • IOS评论框不贴底(ios12新bug)
  • Java方法详解
  • js对象的深浅拷贝
  • Sass 快速入门教程
  • Wamp集成环境 添加PHP的新版本
  • win10下安装mysql5.7
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 将回调地狱按在地上摩擦的Promise
  • 跨域
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 详解移动APP与web APP的区别
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (07)Hive——窗口函数详解
  • (2)nginx 安装、启停
  • (2020)Java后端开发----(面试题和笔试题)
  • (BFS)hdoj2377-Bus Pass
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (pytorch进阶之路)扩散概率模型
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (四) 虚拟摄像头vivi体验
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • .gitignore
  • .NET Core IdentityServer4实战-开篇介绍与规划
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .NET I/O 学习笔记:对文件和目录进行解压缩操作
  • .NET开源项目介绍及资源推荐:数据持久层 (微软MVP写作)
  • .stream().map与.stream().flatMap的使用
  • @Autowired和@Resource装配
  • @staticmethod和@classmethod的作用与区别