当前位置: 代码迷 >> 综合 >> 前端基础复习--20 文字阴影?盒子阴影?mask遮照?倒影?filter:blur()模糊?calc计算?
  详细解决方案

前端基础复习--20 文字阴影?盒子阴影?mask遮照?倒影?filter:blur()模糊?calc计算?

热度:53   发布时间:2024-02-02 02:20:49.0

1. text-shadow:
文字的阴影
x y blur(模糊程度) color 

    注:阴影的默认颜色是跟文字样色相同
注:通过逗号的方式进行分割,可以设置多阴影

2. box-shadow:盒子阴影是针对容器的 
x
y
blur(模糊程度 px)
spread(阴影范围 px)
color
inset(内阴影)  内阴影还是外阴影 默认是外阴影
可以设置多阴影,用,隔开

    注:盒子阴影的默认样色是黑色。
注:??默认就是外阴影,如果设置outset不起作用,可选的值只有inset表示内阴影。

    hover的时候向上偏移可以用浮动来做 在hover的时候改变浮动位置,如设置top:-3px;这样做

3. mask 遮罩

    url
repeat
x
y
w 宽
h 高
可以设置多遮罩

    注:??mask目前还没有标准化,所以需要添加浏览器前缀。

    注:默认是x、y都平铺。 只有mask是实心的区域才可以,透明的区域就不行

4. box-reflect   倒影 要加浏览器前缀 
above   上
below   下
left    左
right   右
距离
倒影中的第3个参数:遮罩 | 渐变 (可以做遮照或渐变)

    渐变:??只是针对透明度的渐变,不能支持颜色的渐变。

5.   blur模糊
filter : blur()
例如:
filter : blur(20px)

6. calc计算
四则运算 
例如:
calc(100%-100px)

  相关解决方案