记一些css属性总结(一)

17 篇文章 2 订阅

前言:

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

  • 18
    点赞
  • 5
    评论
  • 19
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页

打赏

北极光之夜。

谢谢~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值