记一些css属性总结(一)

前言:

今天刷短视频刷着刷着看了一个讲阿姆斯特朗登月可能看到外星人的视频,越看越上头,接着去又去搜看了他登月的场面~接着天马星空的感觉美国是不是隐藏外星人信息的事实,最终不由感叹宇宙真的是太大了,以至于自己身边的琐事都感觉没了意义,,,这可不行,还是发篇文章缓解缓解心情。至于文章,就如题,就是记录一些常见的css属性罢了。
在这里插入图片描述

(以上为为我自言自语可跳过~)

内容:

1.transition属性:

含义:过渡属性,通常用于鼠标经过元素时样式的改变
语法
transition: property duration timing-function delay;
transition-property 规定设置过渡效果的 CSS 属性的名称,(全部就写all)。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

2.outline 属性:

含义:outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。通常用于outline:none;去掉一些默认的蓝色边框
语法
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。

3.filter(滤镜) 属性

含义:属性定义了元素(通常是图片)的可视效果,通常就是通过filter: blur(px)设置模糊效果**
语法
详细~

4.属性:clip-path属性:

含义:很强大,可以用裁剪方式创建元素的可显示区域,那么区域内的部分显示,区域外的就会隐藏。能用在很多方面。显示各种各样形状的图形
语法
clip-path: circle(xx);定义圆。
clip-path: ellipse(xxxx);定义椭圆。
clip-path: polygon(xxxxxxx);定义多边形。
xxxx一般是写那个图形的相对坐标,然后每个坐标点连起来形成的封闭图形就是要显示的内容。

5.:text-transform属性

含义:属性控制文本的大小写。一般用在把一句英文不管写的大小写都全换成大写
语法
text-transform:none 默认。
text-transform:capitalize 文本中的每个单词以大写字母开头。
text-transform:uppercase 定义仅有大写字母。
text-transform:lowercase 定义无大写字母,仅有小写字母。
text-transform:inherit 规定应该从父元素继承 text-transform 属性的值。

6. background-clip: text;
-webkit-background-clip: text;

含义:一般可以用来把背景图只在字体里显示
语法
background-clip: text;
-webkit-background-clip: text;

7 user-select属性

含义:能控制用户能否选中文本。一般用来设置不能。
语法
user-select:none |text| all | element
none:文本不能被选择
text:可以选择文本 (默认)
all:当所有内容作为一个整体时可以被选择。
element:可以选择文本,但选择范围受元素边界的约束。

8. linear-gradient

含义:线性颜色的渐变。就从左往右变,从左上往右下变…
语法
background-image: linear-gradient(direction, color1, color2, …);
direction:用角度值指定渐变的方向(或角度)。如to bottom right,,,to top,或直接角度50deg。

9. radial-gradient

含义:径向颜色的渐变。就是像圆形一样从中心点扩散。
语法
background-image: radial-gradient(shape size at position, start-color, …, last-color);
如background-image: radial-gradient(red 5%, yellow 15%, green 60%);
表示中心红,然后到黄,最外面绿,%设置个占多少。
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

10.-webkit-text-stroke

含义:文本字符指定了宽和颜色。就是可以让字体外面有一个有颜色的宽的的线包围着。
语法
如:-webkit-text-stroke: 4px red;

总结:

先这样,后面再发~
22

猜你喜欢

转载自blog.csdn.net/luo1831251387/article/details/111320280