当前位置: 首页 > 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 前端面试准备 - 收藏集 - 掘金
  • CSS相对定位
  • css选择器
  • input实现文字超出省略号功能
  • JS字符串转数字方法总结
  • Laravel Telescope:优雅的应用调试工具
  • MySQL的数据类型
  • PermissionScope Swift4 兼容问题
  • springboot_database项目介绍
  • Unix命令
  • 多线程事务回滚
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 前端面试之闭包
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • Java性能优化之JVM GC(垃圾回收机制)
  • 从如何停掉 Promise 链说起
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • (2.2w字)前端单元测试之Jest详解篇
  • (4)(4.6) Triducer
  • (BFS)hdoj2377-Bus Pass
  • (MATLAB)第五章-矩阵运算
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (六)激光线扫描-三维重建
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (学习日记)2024.01.09
  • (原)本想说脏话,奈何已放下
  • (自用)learnOpenGL学习总结-高级OpenGL-抗锯齿
  • .NET Core 项目指定SDK版本
  • .NET DataGridView数据绑定说明
  • .Net mvc总结
  • .NET 表达式计算:Expression Evaluator
  • .NET 直连SAP HANA数据库
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET中的Exception处理(C#)
  • @Builder用法
  • @JsonFormat与@DateTimeFormat注解的使用
  • [ 常用工具篇 ] AntSword 蚁剑安装及使用详解
  • [AIGC] 广度优先搜索(Breadth-First Search,BFS)详解