CSS一些冷门但优化用户体验的样式属性

简介: CSS一些冷门但优化用户体验的样式属性

众所周知,CSS是用来写页面的样式的,一些基础的样式属性想必大家一定是会用的,今天给大家分享没有他也能用,但有了他更好的一些属性

首先是这个属性(鼠标放上去变成小手):

cursor: pointer;

这个还是蛮好用的,一般加在按钮上或者一些需要进行点击的元素上,当鼠标放在这个元素上,鼠标就会变成一个小手指着该元素,也是提升用户体验了,让用户知道这个“按钮”可以点击

还有一个我个人觉得蛮有用的(鼠标放上去变成禁止)

cursor: not-allowed;

一般加在按钮上或者一些需要进行点击的元素上,当鼠标放在这个元素上,鼠标就会变成一个圆圈,相当于禁止修改该元素,也是提升用户体验了,让用户知道这个“按钮”或“输入框”是用来查看的,不可以点击或进行修改

shape-outside: circle(50%);

还有属性是用来控制元素外形形状的

shape-outside: circle(50%);

这个属性可以将元素的形状来进行改变,根据自己的需要来进行调整改变,可以优化页面的样式,提升用户体验

下面这个应该不算是冷门(css旋转属性):

transform:rotate(angle);

这个属性也是可有可无,但是有了也是优化用户体验

说白了CSS的样式怎么写都可以,就看这些花里胡哨的属性自己怎么去利用了,只有样式写的尽人意,让人要看下去的念头,当然项目才会被重视和推广

相关文章
|
6天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
1天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
1天前
|
前端开发
css <样式一>
css <样式一>
8 1
|
17天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
31 6
|
22天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
22天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
27天前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
30 1
|
28天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
19天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
34 0
|
19天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
27 0