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

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

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

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

cursor: pointer;

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

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

cursor: not-allowed;

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

shape-outside: circle(50%);

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

shape-outside: circle(50%);

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

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

transform:rotate(angle);

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

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

相关文章
|
11天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
4天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
8 1
|
17天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
104 1
|
24天前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
26天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
37 2
|
4天前
|
前端开发
css简写属性
css简写属性
11 0
|
5天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
5天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
21天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
11 0